Článek původně vyšel na autorově webu Je čas.

Pokud nestačí, aby se texty zobrazovaly základním patkovým (font-family: serif) nebo bezpatkovým (font-family: sans-serif) písmem – typicky Times New Roman a Arial, existují dvě možnosti:

1. Připojit externí písmo pomocí @font-face.
2. Použít písmo systémové.

Výhody systémových fontů

Nové operační systémy nabízejí velmi kvalitní fonty, které:

1. Není nutné stahovat, protože už je návštěvník má nainstalované. Zvlášť na pomalém mobilním přípojení jsou externí fonty kvůli rychlosti problematické.
2. Jsou dostupné zdarma (pro účely použití v CSS vlastnosti font-family).
3. Dodají stránce vzhled nativní aplikace.

Zásadní problém může být v tom, že různé operační systémy mají hlavní systémové písmo jiné. Stránka používající systémový font se tak vizuálně bude lišit napříč operačními systémy a prohlížeči.

Použití UI fontů

Zápis používající výchozí systémové písmo, který je univerzální pro různé operační systémy (Windows, Linux, OS X).

font-family:
  -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", sans-serif;

Například GitHub používá od poloviny roku 2016 následující předpis:

font-family: 
  -apple-system, BlinkMacSystemFont, 
  "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

• Smashing Magazine: Using System UI Fonts In Web Design: A Quick Practical Guide

Pořadí je důležité, protože některé systémové fonty jednoho OS se poměrně často vyskytují i v jiném OS. Třeba systémové písmo Windows – Segoe UI se může snadno dostat na OS X při instalaci Microsoft Office.

Systémové písmo Androidu – Roboto potom budou mít dostupné třeba androidoví vývojáři ve Windows.

Možné problémy

Fonty spoléhající se na dostupnost v operačním systému trpí rizikem, že nějaký uživatel bude mít špatnou verzi daného fontu. Seznam dostupných písem se hodně liší napříč OS a uživateli, takže se docela složitě testuje.

Při použití názvu specifického fontu jeden nikdy neví, kterého kostlivce tím vytáhne ze skříně. Následující článek popisuje nechtěné nastavení písma na systémové písmo z Windows 3.0.

V případě Windows a OS X by výše uvedený seznam měl být poměrně spolehlivý, na Linuxu ale může dojít k potížím.