Recently, WordPress.com (the paid and web hosted version of the WordPress software) added further Typekit integration into their service. That’s all good if you are a member of Typekit and use WordPress.com, but if you are hunting for custom themes, you don’t have that at your disposal. What you do have, however, is the power of @font-face for your custom theme CSS, and you can style accordingly.

How does it work?

Activating @font-face is pretty simple. You have to have your custom font saved online somewhere that you can reference it, and have to include it in your style sheet for your theme. The code would work as follows:

@font-face {
  font-family: "Helvetica";
  src: url(http://www.example.com/fonts/helvetica.ttf)
           format("truetype");
}
p { font-family: "Helvetica", sans-serif }

The above code names a font with an identifier, in this case, “Helvetica”, and tells the style sheet where to find the font, the url changing based on where you have your font uploaded. The format will become important later on in the tutorial. Unfortunately, as is often the case, not all browsers are created equally, and truetype fonts are not recognized as imports in all browsers. Thankfully however, Google once again comes to the rescue, and has just released a new method for importing fonts in, and even better, you don’t have to host them yourself!

The Google Web Fonts API currently has about 180 fonts that are royalty free for you to insert into your website wherever you choose. They have made it simple to sample text, get link, import, and javascript code, and show how to add the font into your stylesheet. Now there’s more reason than ever to give your website a unique look with a less boring font than Arial or Times New Roman!