There are many different ways to use non standard web fonts in web pages. I’ve tried a lot of these ways in the past and have found that some techniques are better than others. Here’s one way of going about using alternative free fonts in a simple step by step guide. I hope this post will help others by demystifying the process.
To complete these steps you’ll need an understanding of HTML and CSS and have a site already set up with some <h1></h1> tags and a separate .css file for the layout of your site.
Font squirrel
For this example we’re going to change all the h1 elements to League Gothic.
- Go to http://www.fontsquirrel.com/fontface
- Find League Gothic and click ‘Get Kit’
- Open the .zip file and rename it ‘type’
- Place it in the root directory of your website
- Find the file stylesheet.css (in the file you just renamed ‘type’)
- Copy the code from this file into your main .css file
- In this css you just copied, make sure all the paths to the fonts are correct by adding /type/ just before all the lines which read League_Gothic-webfont. For example: src: url('/type/League_Gothic-webfont.eot');
- Now in your main css file type h1 {font: 'LeagueGothicRegular'}
Bingo. Now all your <h1></h1> elements are displayed in League Gothic.
Bravo, Mr. Hooker! I don’t think anyone has explained this process as clearly, and certainly not as succinctly. Thank you!
You’re welcome Mr. Wolf. I’m glad you found my explanation clear and succinct. some other ways to use free alternative fonts on the web are: http://www.google.com/webfonts and some brilliant paid for services like http://typekit.com/ thanks for the (first ever) comment.