-1

According to my understanding every OS has its supported fonts. If a site is using another font that is not supported by an operating system, then a default font will be shown, like on Android the roboto. At the same time I have come across sites that are using a font that is clearly not on the iOS font list, yet on all devices including iphones and ipads and all other operating systems it is displayed right. So how is that possible? Is there a solution around this problem? Thanks,

Vladislav Rastrusny
  • 29,378
  • 23
  • 95
  • 156
Peter
  • 3
  • 4

1 Answers1

0

Using CSS3's @font-face rule, you can now specify your own font name and font file:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

Then to use the font, use the font-family property:

div {
    font-family: myFirstFont;
}

Google has tons of free web fonts that you can include in your HTML/CSS.

Marcus Adams
  • 53,009
  • 9
  • 91
  • 143
  • Thanks Marcus! Do you know if this rule applies to Android too? – Peter May 13 '15 at 19:20
  • Yes, any modern browser (or web component) will support CSS3. – Marcus Adams May 13 '15 at 20:11
  • Thanks and just a final question if you allow me: Based on your experience will the @font-face rule increase page load time (because the fonts will need to be downloaded before the page can be rendered...) especially on mobile devices? – Peter May 14 '15 at 13:58
  • Font files are small. One font file that I use is [30K](http://cocblog.com). On a graphics intensive page, it's hardly a blip. If you're trying to theme a page, sometimes it's worth the extra page load to match the font. – Marcus Adams May 14 '15 at 14:43