CODEWITHSUNDEEP
htmlcssgoogle-webfonts
James Gulland
James Gulland

Reputation: 11

Google font not working on Mobile browser

Using Space Mono (Bold 700 Italic) from Google web fonts: https://fonts.google.com/specimen/Space+Mono?query=space+mono

It works fine on desktop Chrome but not Mobile Chrome (or Safari for that matter). I have tried clearing the device cache but no work. It looks like it is just defaulting back to standard monospace font (New Courier).

html looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Countdown to Ibiza 2023...</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap'); </style>
  </head>
  <body>
    <div class="container">
      <p class="para">Countdown to Ibiza...</p>
      <div class="box">
        <p id="days">Loading...</p>
        <p id="hms">Loading...</p>
      </div>
    </div>
  </body>
</html>

and CSS looks like this:

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap');

body {
  padding: 0;
  margin: 0;
  background: rgb(238,174,202);
  background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
  font-family: 'Space Mono', monospace;
}

.container {
    display: flex;
    flex-direction: column;
    height: 80vh;
    align-items: center;
    justify-content: center;
    /* border: 1px solid black; */
  }

.para {
  margin: 0px 0px 10px 0px;
  font-size: 36px;
  text-shadow: 2px 2px rgba(0, 0, 255, .2);
}

.box {
  display: flex;  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px dotted black; */
  border-radius: 40px;
  padding: 0px 60px 0px 60px;
  background-color: white;
  margin: 0;
  box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, .2);
}

#days {
  font-size: 80px;
  margin-top: 30px;
  margin-bottom: 30px;
  /* border: 1px solid black; */
}

#hms {
  margin-top: 0px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  /* font-weight: 500; */
}

@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
  
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }

    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }

  }

/* 2778x1284 pixels at 458ppi */
@media only screen 
  and (device-width: 428px) 
  and (device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
  
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }

    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }
  
  }

What am I doing wrong here? Pulling my hair out over this one!

Upvotes: 1

Views: 595

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17115

Currently, you're loading only font-style:italic and font-weight:700.
Check the google fonts @font-face output:

/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

But you haven't specified any font-weights or styles in your classes.

So just add these properties like so:

body,
.para,
#days  {
  font-family: 'Space Mono', monospace;
  font-weight:700;
  font-style:italic;
}

If you want the 'Space Mono' to be mapped to regular font-weight and style - just add an overriding @font-face rule like so:

@font-face {
  font-family: 'Space Mono';
  font-style: regular;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format('woff2');
}


@font-face {
  font-family: 'Space Mono';
  font-style: regular;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format('woff2');
}



body {
  padding: 0;
  margin: 0;
  background: rgb(238, 174, 202);
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 1) 0%,
    rgba(148, 187, 233, 1) 100%
  );
  font-family: "Space Mono", monospace;

}



.container {
  display: flex;
  flex-direction: column;
  height: 80vh;
  align-items: center;
  justify-content: center;
  /* border: 1px solid black; */
}

.para {
  margin: 0px 0px 10px 0px;
  font-size: 36px;
  text-shadow: 2px 2px rgba(0, 0, 255, 0.2);
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px dotted black; */
  border-radius: 40px;
  padding: 0px 60px 0px 60px;
  background-color: white;
  margin: 0;
  box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, 0.2);
}

#days {
  font-size: 80px;
  margin-top: 30px;
  margin-bottom: 30px;
  /* border: 1px solid black; */
}

#hms {
  margin-top: 0px;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  /* font-weight: 500; */
}


@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
  
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }

    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }

  }


/* 2778x1284 pixels at 458ppi */

@media only screen 
  and (device-width: 428px) 
  and (device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
  
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }

    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }
  
  }
<html>
  <head>
    <title>Countdown to Ibiza 2023...</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <div class="container">
      <p class="para">Countdown to Ibiza...</p>
      <div class="box">
        <p id="days">Loading...</p>
        <p id="hms">Loading...</p>
      </div>
    </div>
  </body>
</html>

Upvotes: 2

Related Questions