Another source (there are many more) for web-friendly fonts is fontsquirrel.com which takes a different approach in that you are required to download all of the font information and store it on YOUR web server once you are ready to show your new font or fonts off to the world.
- Visit fontsquirrel.com. Some of the fonts at this site are quite respectable but let’s have some fun and try an outrageous one named Bloody. Locating Bloody may take a minute or two. Last time I checked it was in the Novelty category but you may also be able to find it via a search bar. Once you located it click DOWNLOAD TTF.
- At this point you should have a file named Bloody.zip in your downloads folder or a folder named Bloody. If you don’t see the folder double-click on the Bloody.zip file to decompress it. Open the Bloody folder. Inside you should see a file called BLOODY.ttf and another named James Fordyce Font License.txt, the font license in which the designer of the font outlines his terms for using it freely. Let’s all stop and offer a brief thanks to Mr. Fordyce for gifting the world with his free bloody font.
- Create a new html file named webfonts.html. and save it inside of the mysite folder.
- Create a new folder inside of your mysite folder named fonts [footnote] you could call it anything, but fonts seems like a reasonable name [/footnote]. Drag BLOODY.ttf into the fonts folder.
- Next create a new css file and, just to make everything easy, save it into the fonts folder as fonts.css. You may end up adding several webfonts to fonts.css. As long as you attach it to an html file, all of those fonts will be available.
- Add the code below to fonts.css
@font-face { font-family: 'bloody'; src: url('BLOODY.ttf') ;}@font-face tells your browser that you are about to use a webfont.
font-family: is where you create a name for your font family. You can name the font-family anything you want to.
src: url tells the browser where to find the font. - Save fonts.css, return to webfonts.html, and attach fonts.css. Remember,
<link href="path to css file" rel="stylesheet" type="text/css">
just below the <title> tags.
- Now that we have a font family named bloody that is linked to the the correct font file, we are going to apply the font family to our body tag. Just below the link to fonts.css, add
<style type="text/css"> body {font-family: bloody; } </style>enter some text within your <body> tags, and test the file in your browser. Bloody enough? If so, remove body from your style definition and replace it with a class named (what else?), .bloody.
- Apply the class to some text by using span or paragraph tags.
- Download another font from fontsquirrel.com and repeat the process by creating a new font family in fonts.css. Add this font family to a new class in webfonts.html and apply it to some text as well. Keep at it until you are bored, but really, really good at it.