header image
 

Adding fonts to your website

The free version of the theme allows you to change the font size and font family of the whole site. The Premium theme allows you to change the font size and font family in over thirty places. It’s incredibly easy to add Google fonts. Simply choose your font(s), decide whether you want bold and italic versions as well, copy a couple of lines of code and add them into your theme from within the options page.

 

Click on the image below for a full size version (lightbox)

adding-fonts

 

If you don’t want to use Google fonts read on!

 

What are fonts?

Fonts are the style of the letters and numbers in books, newspapers, adverts and websites. There are fonts that look like handwriting, fonts that evoke feelings of speed (on the side of trains?), fonts that evoke feelings of being scared (horror movie credits?), fonts that evoke feelings of action (super-hero comics?) etc.

 

What fonts can I use on my website?

When you look at someone’s website their website might say to your computer or mobile phone, ‘Please show this website page with this fancy font’ but your computer or mobile phone might go, ‘Hey! I can’t! I don’t have that font installed!

Furthermore your browser (FireFox, Internet Explorer, Chrome, Safari, Opera etc.) might also go ‘What? Never heard of it!’

So by default you’re limited in the choice of fonts that you use. They’re termed ‘web-safe’ fonts and in theory all computers, tablets, mobile phones etc. have this same limited set of fonts.

But that limitation can be changed (keep reading).

 

How do you add the web-safe fonts that you want to your website?

The simplest way is to add something like the following to the website stylesheet:

 

body {font-family: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”, serif;}

 

What that says is, here’s a bunch of very similar fonts (font-family) that are pretty common to most computers and browsers – try the first one, and if that’s not available try the next one, and if that’s not available try the next one etc. etc.

You can get a list of ‘web-safe’ font-families at http://www.w3schools.com/cssref/css_websafe_fonts.asp

If you’re using the Childishly Simple theme and don’t know what a stylesheet is then paste something like this into the head section (top of the options page):

 

<style type=”text/css” media=”screen“>
body {font-family: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”, serif;}
</style>

 

But I want fonts that aren’t web-safe – fonts that look NICE!

Of course there are only a limited number of fonts installed on computers and odds are that you won’t want one of them. And this is where the font-face rule comes in.

With this rule AND after uploading a set of scalable font images to your website (read more below) you can have any font that you want. This works in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

And here’s the rule to add to your stylesheet:

 

@font-face
{
font-family: this-is-my-super-duper-font;
src: url(‘http://www.mygreatsite.com/images/Sansation_Light.ttf’),
     url(‘http://www.mygreatsite.com/images/Sansation_Light.eot’); /* IE9 */
}

 

Further down the stylesheet add something like this:

 

h3.whatever
{
font-family: this-is-my-super-duper-font;
}

 

Okay, that looks tricky, where can I get these fonts from?

Good question.

Google has some open-source fonts at http://www.google.com/fonts/ but arguably ‘mea­sured by pro­fes­sional stan­dards the aver­age Google Web Font is just awful’.   However there are decent ones out there e.g.  these font reviews: 20 best Google fonts , showcase of best Google fonts and 10 Google fonts,

But let me add that the current Google user interface is RUBBISH.

Okay  – who else?

Here’s a comprehensive review (late 2010) of other places you can use to embed fonts in your website: http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

What you do is link to the fonts that these companies store on THEIR websites. You don’t upload them to your own site. Generally speaking there’s a slight delay whilst the fonts that you want are then fetched from their websites.

And here’s a list of the companies reviewed (but apart from Google they’re not free):

 

Typekit
Webtype
Fontdeck
Fonts Live
TypeFront
Fontspring
Fonts.com
Google Fonts
Kernest
Typotheque
WebINK

 

Screw that, it looks like hard work – I want a PLUGIN!

And well you might. Though you’ll have to pay for the services they use (except for Google).

Putting in fancy fonts should be easy. And with a plugin there’s a good chance that it WILL be easy. I tried wp-google-fonts (linked to below) and I hardly needed to think. 🙂

For TypeKit there’s http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/

For FontDeck there’s http://wordpress.org/extend/plugins/fontdeck/

For Google there’s http://wordpress.org/extend/plugins/wp-google-fonts/ (update:looks like it’s been abandoned)

 

I’m still not happy

I’ve bought fonts from http://www.ultimatefontdownload.com/, there’s a wide choice but they’re not organised, you have to search through them and there are LOTS. I’ve also found some fonts at http://www.kingthingsfonts.co.uk/, http://moorstation.org/typoasis/designers/klein/index.htm and  http://manfred-klein.ina-mar.com/

To search through fonts you need a font viewer and here’s a nice free one http://www.ampsoft.net/utilities/FontViewer.php Click on the  ‘Not installed fonts’ tab to start searching through your folders.

 

Thanks also to:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

http://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work-in-ie

 

Just to throw a spanner in the works you might want to consider that the slightest delay in delivering a web page reduces traffic / conversions and that pretty sites aren’t always necessarily best:

‘Amazon found that +100ms in latency =>-1% in sales.
Google found that +500ms in generating the search page => -20% in traffic’

Source: http://www.csee.umbc.edu/~kalpakis/courses/441/notes/ImportanceOfLatency.pdf

 

 


Fatal error: Call to undefined function related_posts() in /home/gardener/public_html/wp-content/themes/alchemwebchildtheme/single-post-format-wordpress-help.php on line 86