Effortlessly Add Amazing Fonts To Your Website

Google’s Web Font service has been around for a while now, but in the last few months the company’s been working hard to optimise and simplify its use. If you’re an old-school developer like me, you’ve probably stuck to classics like Tahoma, Verdana and Arial. Now, with modern browsers that better follow W3C standards and the chunky bandwidth of today’s internet, there’s really no reason to limit yourself.

If you’re worried about compatibility, don’t be. As Google’s FAQ on the service points out, Web Fonts has excellent support for all popular browsers:

What browsers are supported?
The Google Web Fonts API is compatible with the following browsers:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

Does the Google Web Fonts API work on mobile devices?
The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

Getting the fonts you want is straightforward. Point you browser to the font selection section of the site and peruse the catalogue of 489 fonts. A preview of each font is available; customisation options include tweaking the font size and preview text.

Once you’ve found one you like, you can use it immediately by clicking the “Quick-use” button for the font in question. You’ll be redirected to a new page showing you the code you need to paste into your website’s element. Hopefully the pages on your site share a header file, so this shouldn’t be difficult to sort out. Otherwise, you will have to add it to each page manually.

For example, if you wanted the font Pontano Sans, all you have to do is add the following link tag to the head section of your website:

Then, you can use the font in your CSS markup like you would any other font:

Hello world!

If you’re running WordPress, this would go into your theme’s header.php file. Alternatively, there are a number of plug-ins that can automate the process.

Adding fonts in this way does have an impact on the performance of your site, but the impact is negligible, especially if you limit yourself to just a few fonts (you shouldn’t need more than two or three, at most).

Considering the other options for adding non-web safe fonts to a site — via PHP image generation or creating the titles manually as PNGs or JPEGs in Photoshop or GIMP — by comparison, the Web Font API is completely painless.


The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.

Comments


2 responses to “Effortlessly Add Amazing Fonts To Your Website”

Leave a Reply