How To Get Great Fonts For Your Website

With CSS3 it's now possible and safe to use any non-websafe font for some attractive headers or even the whole of your website content. No more images for this purpose.

Introduction to Using Custom Fonts On Your Website

Do you want to refresh the looks of your blog or website with a great new font of virtually any sort? Want to move away from the boring websafe fonts to create attractive headers or even write the entirety of your website content using a gothic-style font? You no longer need to turn your text into images that search engines can't even index. CSS 3 allows any webmaster to embed a font-face into your pages.

I'm not saying embedding fonts is entirely new, but still a lot of website and blog owners have no idea it is possible. CSS3 is the first version of the Cascading Style Sheets mechanism that is making an attempt to bring it into the website standards.

Even if you don't know any CSS, it's really no big deal to tweak your theme's CSS files here and there. It's a matter of searching for where the fonts for various styles are defined and replacing them with your own choices.

In order to use a font, the first thing you have to do for each individual font you are adding is to call it using the '@font-face' attribute. Incase you don't have any fonts, you can download some really interesting ones from lots of places on the web, like 1001 Free Fonts, DaFont, Urban Fonts.

CSS3

Adding a Custom Font to Your CSS File

You can use the CSS code below to embed and use a custom font on your website.

The @font-face attribute is used to embed the font into your page. In this example the Grudge.ttf font file is stored in the http://yourdomain.xyz/fonts directory of your site. The way to reference it is using this line in the CSS code: src: url(‘fonts/Grudge.ttf’);

In the second part .CSS3_class is the class that defines the style for the element that uses the font.

@font-face
{
  font-family: Grudge;
  src: url(‘fonts/Grudge.ttf’);
}

.CSS3_class
{
  font-family: Grudge;
  font-size: 2.0em;
}

Step By Step Guide to Embedding a Custom Font

So how do I use a custom font on my website again?

Don't worry if the above description of using custom fonts on your blog or website is not very clear at this point, as I'm now going to write step-by-step instructions to do the process.

Open your website in Google Chrome and right click on the piece of text whose font type you want to modify and select 'Inspect Element'.

Let's say your website is wizzley.com. You are on the front page and you want to change the font of the big blue <h1> banner text that reads "Write articles and make new friends. Keep your earnings or donate to charity." Right click somewhere within this text (no need to highlight) and select 'Inspect Element'.
You should see a new window at the bottom of the page. In the section of this window to the right you should see something that reads, 'Matched CSS Rules'.

Under this you should see the path and name of the CSS file that defines the style for the big blue banner text, as well as the appropriate class within the file. (The class is the bit that starts with a dot, in this example its name is .blue_banner_h1.)
Navigate to this file on your server and open it. Find the class that defines the font (.blue_banner_h1) and add the name of the new font right before the list of fonts that exist there. Don't delete anything, just add the new one. If the list is: arial, sans-serif; and you want to add the grudge font, change it to this: grudge, arial, sans-serif.

If you go back to the part of this article where we talked about adding a custom font to your CSS file, you should see that we are now done with the second part of the CSS code. This in itself causes no changes in the looks of your website, because we haven't embedded the new grudge font yet.

Basically, we just told the theme engine to use a font that doesn't exist on the server. And what is the list for? (grudge, arial, sans-serif) If the engine doesn't find the first font it goes on to use the second one, and so on.
To finish the process of adding a custom font to your website, simply add this bit right before the name of the class you've just modified: @font-face{font-family: Grudge; src: url(‘fonts/Grudge.ttf’);} and save the file.

Now, upload the Grudge.ttf font file to the fonts folder on your server. If it doesn't exist, create it right under the root directory, which is usually called html.
Congratulations! You're done! Empty the browser cache and reload the page. You should see your new font in action.