When I was optimizing my website for mobile devices, I noticed that the font size needed adjustment. Surprisingly, on Android phones, the text appeared in orange and normal, while on Safari and Chrome on iPhones, it didn't display correctly.
I have included my complete CSS file below along with the HTML code where I linked the Google font. Any suggestions on how to fix this issue?
HTML (Google Font Link)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Match Game</title>
<link rel="stylesheet" href="./styles.css">
<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=Caveat&family=Libre+Baskerville&family=Nabla&display=swap" rel="stylesheet">
</head>
CSS (Font Family and Screen Adjustments)
h1, p, #playAgain, button{
font-family: 'Nabla', sans-serif !important;
}
@media (min-width: 319px) and (max-width: 480px) {
h1{
font-size: 3.5rem;
}
#normal, #hard{
font-size: 3rem;
}
.front{
border-radius: 0.25rem;
}
.back, img{
border-radius: 0rem;
}
#buttonContainer{
margin-top: 50px;
}
}
@media (min-width: 481px) and (max-width: 991px){
h1{
font-size: 5rem;
}
.front{
border-radius: 0.5rem;
}
.back, img{
border-radius: 0rem;
}
#buttonContainer{
margin-top: 25px;
}
#normal, #hard{
font-size: 3rem;
}
}
@media (min-width: 992px){
h1{
margin: 0;
}
}
MRT snippet:
@import url('https://fonts.googleapis.com/css2?family=Nabla');
html {
font: 80px 'Nabla';
color-scheme: dark;
}Test