Google fonts not loading on Mobile

Question

I am trying to use Google font Six Cap on my webpage http://iconablare.in/iconablareredesign

It is working perfectly on Desktop but it doesn't load on mobile with the full website but when i tried to make a new html file with just that font

http://iconablare.in/iconablareredesign/style.css it loads on both web and mobile perfectly can anyone help out ?

I am using same code in both files .

Answer 1

If it is feasible for you to try to include your google font link scripts in your header instead of importing it in your css like this :

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

instead of this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

and try to see if that works,

Anyway if your header is not accessible or you insist on importing it in your css make sure that the @import lines of code to be the very first line file like this:

@import url(http://fonts.googleapis.com/css?family=Six+Caps);
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

instead of this:

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}


@import url(http://fonts.googleapis.com/css?family=Six+Caps);
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

(Also discussed here: How to import Google Web Font in CSS file?)