Which CSS is rendering for phone view

[Sam_78]

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 abante.
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

[Sam_78]

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">

[Basara]

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 

Code Select Expand

<link href="//fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
So no matter what protocol on page fonts will be always loaded.