Add Custom Fonts to Your Website

Add Custom Fonts to WebsiteI've seen other websites using cool custom fonts (as real, SEO-friendly text) and I scratched my head wondering how can they display anything other than the boring: arial, times, georgia, verdana, etc. See a working example on this post or on Children's Bible website. It shows stylistic fonts, but you still get credit for SEO by having the real text on the page. Fortunately, there's an easy way to do this, and it displays consistently well on major browsers: IE, Firefox, Chrome, etc.

Q: How to Add Custom Fonts to Your Website:

A: Easiest Way: Use Google's Web Fonts for your website

1. Go to http://www.google.com/webfonts and choose a font

2. Click on the font you want, then click 'Use This Font'

3. It will give you the link to Google's css stylesheet for displaying that font, like putting this in the header:

<link href='http://fonts.googleapis.com/css?family=Mako' rel='stylesheet' type='text/css'>

4. Now, just declare that font to style one of your tags, like this:

h1 { font-family: 'Mako', arial, serif; }

B: Slightly Harder Way: Use Fonts from your own computer for your website

1. Go to your computer fonts folder (C: > Windows > Fonts) to find a TrueType font you want (Microsoft Word has a nice font previewer built into it)

2. Copy it to your folder with your web files

3. Open your external css file (if you have one), otherwise make one (if you don't know how, you may want to Google this, as I'm not getting into that here.

4. Paste the code below into your css file and replace the maian with whatever your font name is. The font family name, you can just make it whatever name you wish (no spaces or special characters, though). Note: you have to keep it in this exact order (EOT before TTF) or it won't work on all browsers).

@font-face{font-family:maian;src: url("./font/Maian.eot"); src:local('Maian'), url('./font/Maian.TTF') format('truetype');

.maian { font-family:"maian", verdana, sans-serif;

5. Now, you need to convert your .TTF font to .EOT so Internet Explorer can display it. IE always has to be a pain, doesn't it? You have two options for this:

A. Convert online at http://www.fontsquirrel.com/fontface/generator

B. Use Microsoft's Web Embedding Fonts Tool
http://www.microsoft.com/typography/WEFT.mspx

6. Change the css above to reflect the folder and name of your EOT file after you convert it.

7. Now in your html just put <p class="maian">Custom Font Text</a> for example and it should display just fine in Internet Explorer, Firefox, Chrome and any other CSS3 browsers.

To add custom fonts to WordPress

1. Find your font (use Google web fonts for simplicity)

2. Click 'use this font' and copy the css link code, for example:
<link href='http://fonts.googleapis.com/css?family=Fontdiner+Swanky&v1' rel='stylesheet' type='text/css'>

3. Go to admin > Editor > header.php then before the tag, paste in your css link code:

4. Go to admin > Editor > style.css and add a line like:
.swanky { font-family: 'Fontdiner Swanky', arial, serif; }

5. In your wordpress post, choose HTML view and the text you want to use that font do:<span class="swanky">This is swanky text</span>

Have fun!

Related Posts Plugin for WordPress, Blogger...
This entry was posted in General Webmaster Tools and tagged , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.