← All posts

System Fonts in WordPress with Font Hero: Zero Font Downloads

font hero

Even a well-optimized web font is still a file your visitors have to download before the text looks right. If your design doesn't need a specific typeface, you can use system fonts in WordPress instead. Font Hero registers the font the visitor's operating system already has, so no font file loads from your server and pages load faster.

Enable System Fonts in Font Hero

Font Hero also handles custom fonts and Google Fonts, so system fonts are disabled by default. Not every design calls for them. To turn them on:

  1. Go to Tools → Font Hero and open the Features tab.
  2. Under Activate Features, check System fonts.
  3. Click Save Changes.

What Font Hero registers

Reload Font Hero's generated stylesheet (wp-content/uploads/font-hero/font-hero.css) and you'll see new @font-face rules for a system-ui font family, with a separate rule for each weight and style. Every rule lists local fonts in order of preference: San Francisco first, then Helvetica, Lucida Grande, Segoe UI, Ubuntu, Roboto, Droid Sans and finally Tahoma. Here is the bold rule from the video:

@font-face {
	font-family: system-ui;
	font-style: normal;
	font-weight: 700;
	src: local(".SFNS-Bold"), local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
}

Every source uses local(), not url(). The browser takes the first font from the list that is already installed on the visitor's machine. Mac users get San Francisco, Windows users get Segoe UI, Linux users get Ubuntu, and Android users get Roboto. Your server sends no font files, so text renders right away with no font download holding it up.

If your design needs a clean, native-looking typeface and doesn't depend on a specific brand font, this gives you the fastest font setup possible with a single checkbox.

Get Font Hero → dplugins.com

Related posts