Ways to display custom fonts on your website | Heart Internet Blog – Focusing on all aspects of the web

Standard web fonts. Love ‘em or hate ‘em, you’ve got to admit that they’re in desperate need of an update.

You can specify several different fonts in your CSS, but you run the risk of not having full control over what your website looks like to your visitors. You could also make your titles into images using fonts on your computer, but this may impact your page loading times and the SEO of your site.

Luckily there are several real workarounds for getting a wider variety of fonts on your website…and here are our top picks..

Google Font Directory

If you’re anything like me, you don’t want to pay to use a non-standard web font on your website. This is where the Google Font Directory comes in.

The last time I visited the Google Font Directory there were literally only a handful of fonts to choose from, but they have added a lot more. What was originally a token gesture from Google has become a valuable resource for web designers, and its future looks bright.

The biggest advantage is that the fonts are all free to use – and it’s very simple to implement them as you just need a couple of lines of CSS. Although there aren’t as many fonts to choose from as other services, there are already some great ones on there.

Google’s Font API is great for designers who don’t like fiddling with code too much and want a fast, easy solution. Check out the Google Font API here.

.@font-face

Using the @font-face CSS rule, you can display custom fonts on your webpage for all to see. Whilst it’s not as streamlined as Google’s out-of-the-box font solution, the bonus is that you have a lot more choice when it comes to typefaces.

Check out Font-Face and this tutorial for implementation details.

.Font Squirrel Font-Face Kits

Based on the @font-face rule, Font Squirrel has put together a selection of free font-face kits so you don’t have to waste time converting files or searching for all the different file types you need. Download, unzip, upload to your site and add the code.Another bonus is that there are hundreds to choose from.

.Typekit

Typekit is similar to the Google Font API in terms of implementation, but has a bigger selection of fonts to choose from. The downside is that you’ll more than likely have to pay; there’s a free plan available, but it’s quite restricted in terms of page views. If you design a lot of websites (or just really love typography), the paid subscriptions are reasonably priced alternatives.

Typekit

.Typotheque

Another premium website, Typotheque measures your usage via bandwidth rather than page views. It also offers a web trial licence so you can see if their service is right for you before making a commitment.

.

 

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Got a question? Explore our Support Database. Start a live chat*.
Or log in to raise a ticket for support.
*Please note: you will need to accept cookies to see and use our live chat service