https://i.sstatic.net/z7HcQ.png https://i.sstatic.net/1tH5d.png
Having some trouble with the font display on my website. Currently using:
font-family: 'Fredoka One', cursive;
It's working well on PCs and desktops, but when viewed on a phone, the cursive fonts appear small. Attempted to use a media query, but it doesn't seem to be effective.
/* Phone fonts*/
/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
font-weight:800!important;
font-family: 'Fredoka One', !important;
font-size:20px;
}
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
body {
font-weight:800!important;
font-size:20px;
font-family: 'Fredoka One', cursive!important;
}
}
None of these CSS styles seem to be taking effect. When inspecting on Chrome browser for iPhone, it looks fine, but actual viewing on the phone shows differently.