Back to top

How to Embed Fonts On a Website

Christopher Jastrzebski's picture

As a web developer that optimizes website load times, I see a lot of websites that are slowed down by things that are easy to do in a faster way. One of those things is loading fonts from a third party source, like Google Fonts. Loading fonts from Google ensures the fonts are available for your visitors, but there's a better way: embedding fonts. Embedding fonts also ensures the fonts are available for your visitors, but it also reduces network requests for Google javascript and reduces latency, which makes your website load faster. A faster website provides a better user experience which is rewarded with better search result page placement by search engines and greater engagement by visitors. And its easy to do.

Do all fonts need to be loaded from a font service or embedded for a font to be available to visitors?

No, as long as your okay with one of a group of similar fonts being displayed. Web-safe fonts are groups of smilar fonts that can be declared and at least one of them will be available on almost all of your visitors' devices. In practice, that means you pick a family of fonts and will have one of them displayed to the user depending on their device. You just don't get to pick the exact font.

Does a font need to be loaded from a font service or embedded to display that exact font?

Yes. If you want to guarantee that a particular font is always available to your visitors, you'll need to load the font from a font service like Google or embed the font on your website. Because embedding the font in your site makes your website faster, that's the one you should do. To do that, you'll need to:

  1. Get a copy of the font. There are many free fonts available for download at Google Fonts. In our example, we'll get the Open Sans font in regular weight (400) and bold weight (700).
  2. Generate web fonts. Web fonts are sets of font files for multiple devices that together, allow the font to be loaded on almost all browsers. A simple Google search for "web font generator" will return multiple free online tools that you can use to generate fonts. Two that I've used are Web Font Generator and Font Squirrel Web Font Generator. Follow the wizard and you'll download a set of web fonts of your font.
  3. Upload the fonts to the hosting account for your website. The most common way to do this is by FTP.
  4. Declare the font at the top of your CSS stylesheet. To do this, you'll use the @font-face at-rule. In our example, we converted the Open Sans font in Regular (400 weight) and Bold (700 weight), the web font file names should match those of the font we generated. We upload them to a folder fonts at the root of the hosting account's public folder. In the stylesheet, we add the @font-face at-rule:
    
    @font-face {
      font-family: 'Open Sans';
      src: url('/fonts/open-sans-regular.eot');
      src: url('/fonts/open-sans-regular.woff') format('woff'),
      url('/fonts/open-sans-regular.ttf') format('truetype'),
      url('/fonts/open-sans-regular.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'Open Sans';
      src: url('/fonts/open-sans-bold.eot');
      src: url('/fonts/open-sans-bold.woff') format('woff'),
      url('/fonts/open-sans-bold.ttf') format('truetype'),
      url('/fonts/open-sans-bold.svg') format('svg');
      font-weight: 700;
      font-style: normal;
    }
    
  5. Add the style to the selector for which you want the font used. In this example, we want all h1 and h2 elements to be displayed in the Open Sans font, but we want h1 to be in the regular weight and h2 to be in the bold weight.
    
    h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: normal;
    }
    h2 {
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
    }
    

That's it. A few notes:

  1. A font-weight of normal is the same as a font-weight of 400.
  2. Even though we're embedding the font, we still add sans-serif as the last font in the @font-face at-rule. That provides a fall-back in case the embedded font can't be loaded.
  3. Italic fonts should declare a font-style of italic.
  4. Changes to the font-weight and font-style declarations in CSS selectors determines which font is displayed for that element.
  5. The .eot font declaration must come first.
  6. Your fastest web-fonts should be listed earlier in the @font-face rule. Browsers use the first format they read, so whichever is first, rather than whichever is fastest, is used.
  7. .Woff2 is currently the fastest web font. At the time of this writing, web font generators don't provide .woff2 web fonts. Instead, you can use a .woff2 generator. I've had success with Everythingfonts.com's .woff2 generator. If you have a .woff2 web font file, it should be listed between the .eot and the .woff declaration.

How to embed fonts when you have a .woff2 file


@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-regular.eot');
  src: url('/fonts/open-sans-regular.woff2') format('woff2'),
  src: url('/fonts/open-sans-regular.woff') format('woff'),
  url('/fonts/open-sans-regular.ttf') format('truetype'),
  url('/fonts/open-sans-regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-bold.eot');
  src: url('/fonts/open-sans-bold.woff2') format('woff2'),
  src: url('/fonts/open-sans-bold.woff') format('woff'),
  url('/fonts/open-sans-bold.ttf') format('truetype'),
  url('/fonts/open-sans-bold.svg') format('svg');
  font-weight: 700;
  font-style: normal;
}

I convert, embed and optimize web fonts all the time. If you'd like help with your project, please call me at Designfox at (631) 673-5500.

Back to top

We are Long Island's Web Design, Web Development, E-Commerce, SEO and Digital Marketing Specialists

Contact us to find out how we can help your business.

Get it done

We're experts at getting it done. Everyone here has carried the workload of a firm or company on their own. We deliver every time.

Fast

We are expert designers, developers and marketers. We make sure we have time before accepting work so we deliver on time.

Always Available

Good marketing means meeting goals and meeting goals needs communication. Speak with your marketer and developer any time.

Long Haul

We're account-based so we're ready when you need us. We invest into our company so we're invested in yours.