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.
1. Please note the original design for Glass Antiqua, as noted by Denis Masharov, should be accredited to Franz Paul Glass. The Doctor