0

I have custom font 'source sans pro' that loads from server. But it's too heavy I and want use standards (Roboto and San Fransisco) for mobiles.

My css:

*{
font-family: Roboto, San Francisco, "Source Sans Pro", Arial, sans-serif;
}

But my phone is still downloading and using "Source Sans Pro" instead of native. If I add just one Roboto - it works well.

So is there any solution not to load custom font on mobile devices?

Sergey Kudryashov
  • 713
  • 2
  • 9
  • 30

2 Answers2

0

This is quite complicated: There is a way, how to detect a mobile device, for example this library: http://detectmobilebrowsers.com/

You will just include its jQuery version and then you add your code, for example

if{jQuery.browser.mobile == true}{
$(body).css("font-family","Roboto !important");
}

https://jsfiddle.net/0yuk13da/2/

and in css you will have natively the Source Sans Pro for body, and this code overrides your css only if it is a mobile device.

BUT! Sadly, this library does not work for all browsers. Mozilla Firefox for android says, it is desktop. Who knows why. Then, you will need to use media queries.

@media (max-width: 600px) {
  body {
    font-family: Roboto;
  }
}

But even this, is like an alchemy a little bit, as you have many devices with many widths, you have portrait modes and landscape modes, and if you try for example get page width on phone (like via jQuery alert($(window).width());, it will never match your resolution, but what more, every browser return different value. You you will have to experiment with media queries, what will be the best solution for the highest number of devices.

Zorak
  • 709
  • 7
  • 24
0

Simply replace your entry by font-family: Roboto, -apple-system, BlinkMacSystemFont, "Source Sans Pro", Arial, sans-serif;

More details on this Stack overflow discussion

Community
  • 1
  • 1
Miguel Guardo
  • 853
  • 1
  • 9
  • 17