Follow

How to Add Custom Fonts to Your Website

Follow these steps to add custom fonts to your website. Before doing so, we advise that you check with your font foundry (the vendor that sold you the fonts) to make sure that your license allows for making fonts available on your website using the @font-face method. If your foundry does not allow for putting fonts on your Web site, check out the free fonts available at Font Squirrel: http://www.fontsquirrel.com/fontface or check some of the other alternatives listed below.

1. Acquire the fonts that you want in OTF (OpenType Format) or TTF (TrueType Format). Example: CaslonRegular.otf.

2. Go to Font Squirrel: http://www.fontsquirrel.com

3. Go to the @font-face generator: http://www.fontsquirrel.com/fontface/generator Select the “Optimal” setting on the generator.

4. Upload your font, and the generator will provide to you a zip file. Download this file to your desktop, and examine the contents. You should see the following inside this package:

  • generator_config.txt
  • caslon-webfont.eot
  • caslon-webfont.svg
  • caslon-webfont.ttf
  • caslon-webfont.woff
  • CaslonRegular-demo.html
  • specimen_files (folder)
  • stylesheet.css

If you do not see something similar to the above (such as no webfont files), try the “Basic” settings instead. Feel free also to fiddle with the “Expert” settings if you feel like you understand their meaning.

5. Move all of the “webfont” files to the /fonts/ directory on the Web server you are working with. In the above example, this would be: caslon-webfont.eot, caslon-webfont.svg, caslon-webfont.ttf, and caslon-webfont.woff

6. Open the stylesheet.css file. It should look something like this:

@font-face {
    font-family: 'CaslonRegular';
    src: url('caslon-webfont.eot');
    src: url('caslon-webfont.eot?#iefix') format('embedded-opentype'),
         url('caslon-webfont.woff') format('woff'),
         url('caslon-webfont.ttf') format('truetype'),
         url('caslon-webfont.svg#CaslonRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Copy this to your fonts.css file which should be located in the /css/ directory. Edit the URL references to include the path to your actual fonts on the Web server. So, the above code would be changed to this:

@font-face {
    font-family: 'CaslonRegular';
    src: url('/fonts/caslon-webfont.eot');
    src: url('/fonts/caslon-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/caslon-webfont.woff') format('woff'),
         url('/fonts/caslon-webfont.ttf') format('truetype'),
         url('/fonts/caslon-webfont.svg#CaslonRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Now, upload the fonts.css file to the Web server. The other files that were provided from Font Squirrel you may ignore.

7. Open the template file, head.tpl and add the following lines:

{addcss file="fonts.css"}

and upload that to the Web server as well.

8. Now, in any of your other stylesheets, such as custom.css, you can reference the font, and the browser will show that font. Make sure to always provide default backup fonts in case the browser (such as an old version of Internet Explorer) do not support the font your are referencing. Example:

h1 {
    font-family:"CaslonRegular", Times, serif;
}

The above code will use Caslon Regular for <h1> elements if the browser supports the @font-face feature, and Times if that font is available on the host computer, or the default serif font if all else fails.

Alternatives

If your font foundry will not allow usage of their font with the @font-face method, there are alternatives:

  • TypeKit. http://www.typekit.com TypeKit offers a Javascript solution for font delivery, which some font foundries prefer, since this makes it more difficult for people to download and pirate the font from a website. TypeKit has a large number of fonts available, a free option, and is not too expensive for the standard package (about $25/year as of this writing). To implement, please follow the instructions provided by TypeKit.
  • Google Web Fonts. http://www.google.com/webfonts/v2 This service is similar to TypeKit, but it is free and offers fewer font options.
  • MyFonts. http://www.myfonts.com This foundry offers a huge number of fonts, and a system similar to Font Squirrel for embedding fonts. However, their license requires a fee, and there can be a limit based on page views for the site.
Have more questions? Submit a request

Comments

Powered by Zendesk