← All posts

Inline @font-face CSS in WordPress with Font Hero

font hero

When your custom fonts come from an external stylesheet, the browser has to request that file before it knows which fonts to load. In this video we turn on inline @font-face CSS in Font Hero, so the font declarations are written straight into the HTML <head>. You get one less HTTP request, and the font styles load before the rest of your CSS.

CSS @font-face: inline vs external

Most WordPress sites load custom fonts with the CSS @font-face rule. Every declaration names the font family, points to the font file, and sets the weight, style and font-display. Here is one of the declarations Font Hero generated for the Google font Alkatra on our test site:

@font-face {
	font-family: 'Headline';
	font-weight: 500;
	font-style: normal;
	src:	url(http://font-hero.local/wp-content/uploads/font-hero/google-fonts/alkatra/alkatra-medium-normal-latin.woff2) format('woff2');
	font-display: swap;
}

A real site has one of these for each weight and subset, so the list gets long quickly. That leaves one decision: should this CSS go inline in the page, or load from an external file? Font Hero gives you a setting for this.

Enable inline font declaration in Font Hero

By default, Font Hero writes all of your @font-face rules to a separate file (font-hero.css) and links it from the page. In the page source, all of that CSS arrives through one line:

<link rel='stylesheet' id='font-hero-custom-fonts-css' href='http://font-hero.local/wp-content/uploads/font-hero/font-hero.css?ver=…' media='all' />

To inline it:

  1. Open the Font Hero Features settings.
  2. Scroll to the bottom and turn on the option to inline the font declaration CSS.
  3. Save, then reload the front end of your site.

See the CSS move inline in the HTML

Open the page source after you save. The <link> to font-hero.css is no longer there. The whole contents of that file are now in a <style> block right after the opening <head> and <meta charset="UTF-8" />:

<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="UTF-8" />

<style>
@font-face {
	font-family: 'Subheadline';
	font-weight: 400;
	font-style: normal;
	src:	url(http://font-hero.local/wp-content/plugins/font-hero/fontPairing/files/Lora/Lora-Regular.woff2) format('woff2');
}
…

The rest of the site's styles (block styles, global styles and so on) come after it. The fonts are set up first, and everything else follows.

Why inlining improves load time

Each external stylesheet is another request the browser has to make and wait for. With the @font-face rules inline, that request is gone. The font information is already in the HTML document the browser just downloaded, so it can start fetching the font files earlier and render text in the right font sooner.

Why inlining improves style prioritization

When styles come from external files, the browser downloads them without knowing which ones matter most. With the font-face CSS inline at the top of the <head>, the browser reads your font styles before anything else. The source you saw above shows this order: Font Hero's declarations first, then the rest of the site's CSS. Your text shows up in the right font sooner, including on slow connections.

Why inlining avoids browser compatibility issues

Some browsers can have trouble loading external CSS files, especially when a file isn't cached properly. The result can be missing fonts or a broken layout. Once the font declarations are part of the HTML, there is no separate font stylesheet that can fail, so your fonts display correctly.

Who is this for

  • WordPress developers working on page speed who want fewer render-critical requests without hand-editing theme files.
  • Site builders who load custom or local Google Fonts with Font Hero and want the fonts ready before the rest of the CSS.
  • Anyone who has seen fonts fail to load or layouts break because an external font stylesheet didn't load or wasn't cached.

FAQ

Should @font-face CSS be inline or in an external file? For font declarations, inlining has three advantages: it removes an extra HTTP request, the browser reads the font styles before the rest of your CSS, and the fonts don't depend on a separate file that might fail to load or be cached badly. Font Hero lets you switch between the two with one setting.

How do I inline font CSS with Font Hero? Go to Font Hero's Features settings, turn on the inline font declaration option at the bottom, save, and reload your site. The font-hero.css link is replaced by a <style> block in the <head>.

Where does Font Hero put the inline font CSS? Right after the opening <head> and the charset meta tag, before the other stylesheets on the page. That order is what lets the fonts load first.

Do I need to change my theme or font settings after enabling it? No. In the video, the page looks the same before and after. The same @font-face rules are loaded, only from a different place.

Get Font Hero → dplugins.com

Related posts