How To Install Custom Fonts In WordPress Using Typekit

WordPress is a platform which comes with some pre-installed fonts like Verdana, Georgia, Arial and more. But designers and developers always has to be unique and creative. And the simple bloggers cannot able to design their blog to some extent and their blog is limited to their theme design. So, to fuel this design element for fellow bloggers , their is a service called Typekit on this web. This also improves typography of the blog/website.

About Typekit

Typekit is the easiest way to use real fonts on the web. It’s a subscription-based service for linking to high-quality Open Type fonts from some of the worlds best type foundries like Just Another Foundry and TypeTogether. Typekit fonts includes four plans for different levels of WordPress Users – Trial, Personal, Portfolio and Performance. So, if you want to use this perfect service , then you can Get Started by Signing Up.

How To Install Custom Fonts

Typekit allows you to choose and install custom fonts on WordPress Blog. Only what you need is to sign up at Typekit and you are on the go. Complete the Registration process at Typekit after choosing desired plan. You will have the following screen after Registration.

You will get a Javascript which you have to put between the <head></head> of your wordpress theme. Insert the code in your theme and click on continue.

Search the fonts at Typekit and choose the Desired Font you like. There are plenty of fonts available of different categories. Number of Styles and Tags are available, so after getting the best font according to you, click on Add button.You will get the Typekit editor as in Image below.

Insert the appropriate selectors like <h1>,<h2>,<h3> etc. You can also choose Weights and Styles. And if you want to add the font manually then click on Advanced in Selectors option and grab the font-family name and paste in the appropriate place. You can also see the official Typekit Video for more support.

Other Resources

Font Burner Control Panel WordPress Plugin

Typography on the web is very limiting. Luckily you have options when it comes to improving the fonts on your site. The Font Burner Control Panel plugin allows you to easily add any of the 1000+ free fonts available on the Font Burner website to your WordPress theme. Simply find a font you like and type it’s name into this plugin settings and your headlines will instantly be transformed!

[download id=”45″ format=”2″]

TTF Titles WordPress Plugin

This plugin provides two new template tags to replace plain text with styled text images using TrueType fonts. This plugin makes your blog’s content text in your desired font by making the text as an Image. You can get more information here on how can you install and use this plugin successfully.

[download id=”46″ format=”2″]

Dynamic Font Replacement

Use your own ttf- or otf-fonts with wordpress. Seo-friendly, fast and easy. The plugin does display the document and replace the text in the background. The actual source code does remain the same. This way search engines wont have any problems reading and indexing. The conversion is quick and easy. You wont need to implement any extra CSS files because the plug-in does detect the tags used and replaces them automatically.

[download id=”47″ format=”2″]

Image Headlines WordPress Plugin

This plugin allows you to have images created automatically for your entry titles. In this way you can utilize non-standard fonts and get smoother rendering than would be possible with simple text headlines.But this plugin interferes in SEO of your blog. Search Engines can have problems in getting the headlines of Blog Posts.

[download id=”48″ format=”2″]


  1. says

    Hey, thanks for the mention of my article.

    Nice roundup of the different solutions for more customization. I haven’t fully subscribed to the font-face solution though. The dreaded FOUC (flash of unstyled content) makes me think this technology still has some rough edges.

    This article talks about how to implement @font-face on your own, and also has a link to a supposed jQuery fix for FOUC. Although when I loaded that page, the header text still had a FOUC. :D

    Thanks again!
    .-= Jason´s last blog ..1 Quick Way to Increase Your Website’s Visibility =-.


  1. […] How To Install Custom Fonts In WordPress Using Typekit […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>