AbanteCart Community
Shopping Cart Operations => Support => Template Support => Topic started by: Sam_78 on December 21, 2018, 12:07:21 PM
-
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
-
Sorry figured it out
That font was not there on my phone had to mention this in head.tpl
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
-
Sorry figured it out
That font was not there on my phone had to mention this in head.tpl
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
You need to change it to
<link href="//fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
So no matter what protocol on page fonts will be always loaded.