sahil lamba sahil lamba - 14 days ago 5
CSS Question

Google fonts not loading on Mobile

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

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 line of code to be the very first line file which is not the case in your css:

@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);

( as explained here: How to import Google Web Font in CSS file? )