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!
Currently, you're loading only
font-style:italicandfont-weight:700.Check the google fonts
@font-faceoutput:But you haven't specified any font-weights or styles in your classes.
So just add these properties like so:
If you want the 'Space Mono' to be mapped to regular font-weight and style - just add an overriding
@font-facerule like so: