I am having issues with fonts on my site. I am using
font-family: 'Fredoka One', cursive;
And it works fine for PC and desktop but on phone I am getting small cursive fonts. I tried to use media query but it is not working
in style.css
/* 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', cursive!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;
}
}
It is not taking any of these CSS When I inspect on chrome browser for iphone it works fine but when I actually use my phone it is different
I have cleared cache on my phone and on AbanteCart.
Only change I made is in style.css in body tag changed font-family thats it and added the mentioned code at the bottom. i am editing right CSS file as I can see these media queries in browser when I inspect them