29

How to make cross browser, cross platform and all devices compatible css font stack?

James Goodwin
  • 7,360
  • 5
  • 29
  • 41
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

7 Answers7

20

You cannot guarantee the fonts that will be used on a mobile device the same way you can guarantee which fonts are available on a normal computer.

A safe bet is to use a generic font family that can be interpreted by the mobile browser to show you the relevant font, e.g.

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
Puka
  • 1,485
  • 1
  • 14
  • 33
James Goodwin
  • 7,360
  • 5
  • 29
  • 41
  • what is for verdana and arial? – Jitendra Vyas Jan 27 '10 at 02:32
  • Verdana and Arial are sans-serif – James Goodwin Jan 27 '10 at 11:56
  • 5
    Then why not `font-family: Verdana, Arial, sans-serif` if `verdana` and `arial` are not available in device then it can take `serif`. – Jitendra Vyas Jun 23 '10 at 03:36
  • 2
    Because if your font stack specifies anywhere the name of an actual font, it will trigger font aliasing on clients which are lacking this font, for example 'web site asks for "Arial", I'll give it "Liberation Sans", users hate it but it has the same dimensions (metrics), so it will workaround any fixed-pixel design warts'. – nim Sep 04 '16 at 09:00
  • This was the most unpleasant up vote I have ever given. ;) –  Jun 11 '17 at 01:07
  • Can you declare all of the families one time only on the CSS file?, or every time you use font-family css attribute in a class, you need to add all of the options as fallback?. – Kosem Mar 13 '22 at 12:05
15

The best solution is to always supply a generic font family after any specific fonts:

font-family: "Foo Regular", "Bar Sans", sans-serif;

Anonymous
  • 49,213
  • 1
  • 25
  • 19
4

Maybe this link can give you some more ideas:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Using the above font families never gave me problems.

easwee
  • 15,757
  • 24
  • 60
  • 83
1

Perhaps this can help you on your quest: Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite

nikc.org
  • 16,462
  • 6
  • 50
  • 83
1

It points out in 15.3 of the W3C Recommendation regarding the 'font-family' property that you should have fallback fonts in a font stack so that your website visitor has some viable choices.

The 'web safe' font stacks I use, which cover most if not all devices are as follows:

/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}

This covers headers, paragraphs, monospace for code samples, fantasy for special items, and cursive for emphasis. You may just need one for headers (H1~H6) and another for body text:

body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}

Check the following cheatsheet from 2010 that includes Linux and iOS. It gives the average percentages for usage between Windows, Mac, Linux, and iOS: Web Safe Fonts

Michael Moriarty
  • 831
  • 13
  • 16
1

Some "Web Safe Fonts" links from Google top:

https://www.cssfontstack.com/

http://web.mit.edu/jmorzins/www/fonts.html

Vadzim
  • 24,954
  • 11
  • 143
  • 151
0

Forget about cross browser cross platform font stacks, the web examples usually only care about windows and OSX for basic latin, they fail on international languages and Linux, and new form factors.

Linux never used the same fonts as Windows and OSX for licensing reasons, and font design tools have become mature enough you find a lot of diversity nowadays (not that creating a large encoding font is easy, but a lot of users only care about fonts that cover their particular language).

Font creation has become cheap enough big corporations (including mobile manufacturers) now like to differentiate by commissioning new fonts for big releases (new device or major OS version).

When font surveys were still popular the DejaVu font family had a lot of reach on Linux, that may not be the case anymore. DejaVu and Arial have different metrics.

Just use generic CSS font families in your stack, avoid any helvetica derivative, do not use a design that depends on particular font metrics and you'll be ok.

nim
  • 2,345
  • 14
  • 13