How to Embed Fonts On a Website

At Designfox, we embed fonts on all of our websites. Embedding fonts and loading fonts through Google fonts both guarantee the fonts are available for your visitors. But only embedding fonts reduces network requests which makes your website load faster. A faster website makes for a better user experience which can be rewarded with better search placement by search engines and greater engagement by visitors.

Do all fonts need to be embedded to be available to visitors? No, there are web-safe fonts that are will load from the visitor's device. These web-safe fonts are grouped into families of fonts, of which one font in each group will be available on the user's device. In practice, that means you pick a family of fonts that are similar to each other, but you don't get to pick the exact font.

If you want to guarantee that a particular font is always available to your visitors, you'll need to embed the font on your website. To do that, you'll need to:

  1. Generate the web fonts. Web fonts are special fonts that are optimized for embedding on websites. A simple Google search will provide multiple free online tools to generate fonts. Two that I've had success with are Web Font Generator and the Font Squirrel Web Font Generator. Follow the wizard and you'll end up downloading a set of web fonts of your font.
  2. Upload the fonts to the hosting account for your website. The most common way to do this is by FTP.
  3. Add CSS declarations to your style sheet. In this example, the font we convert is Open Sans in Regular (400 weight) and Bold (700 weight), the file names match those of the fonts we generate and we uploade them to a folder fonts at the root of the hosting account's public folder.
    
    @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;
    }
    
  4. 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 in Open Sans, 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-family declaration. That provides a fall-back to the device's default san-serif font.
  3. The font-weight declaration, not the font-family one, is what determines which font file gets loaded. This is a better practice than creating font-face declarations with the weight in the name because when you're declaring a style, the standard practice for changing a font's weight is declaring or updating font-weight, not changing the font name.
  4. Browsers will use the first format of font they read. So your fastest web font should be earliest. In an ideal world, you'd get a .woff2 webfont from the generator. If you do, you want that one listed first. .Woff2 is faster.

We're expert web developers. We embed fonts all the time. Call us at (631) 673-5500 for help with your project.