Using @font-face …

  1. Find the font you like
  2. Make sure the font license allows you to use it!
  3. Upload the font to your site / include with your theme package.
  4. Write the CSS.

OK … that seems simple enough, four relatively easy steps to follow. Let’s give it a run.

Step 1, I went to Google Web Fonts and browsed for something I liked; I chose “Glass Antiqua” by Denis Masharov1.

Step 2, the font is licensed under the SIL Open Font License, Version 1.1, which is compatible with the GNU GPLv2 License (something I strive to release all projects under).

Step 3, I uploaded the font and license text to my current theme’s font folder.

Step 4, I made the necessary CSS modifications to, in this case, change the site’s title font.

@font-face {
  font-family: 'Glass Antiqua';
  src: url('fonts/GlassAntiqua-Regular.ttf') format('truetype');
}

#blog-title {
  /* font-family: "Copperplate Gothic Bold", Arial, sans-serif; */
  /* font-size: 30px; */
  font-family: "Glass Antiqua", cursive;
  font-size: 70px;
  ...

… and with a tweak to the `font-size` value, we’re done!

Very easy, and points for not having to worry about being behind a firewall, intranet or local test environment as this method will work in those cases as well.

To see the footnotes click here.To hide the footnotes click here.
Footnotes:
1. Please note the original design for Glass Antiqua, as noted by Denis Masharov, should be accredited to Franz Paul Glass. The Doctor