Downloadable fonts

You have already experienced Google Fonts, but another source (there are many more) for web-friendly fonts is Fontsquirrel 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. With google fonts, of course, you simply link to the font’s url.

    1. Visit  Some of the fonts at this site are quite respectable but let’s have some fun and try an outrageous one named Bloody. You should be able to locate Bloody via the site’s search bar. Once you located it click DOWNLOAD TTF.
    2. At this point you should have a file named in your downloads folder or a folder named Bloody. If you don’t see the folder double-click on the 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.
    3. Create a new html file named webfonts.html. and save it inside of the mysite folder.
    4. 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.
    5.  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.
    6. 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.

    7. 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.

    8. 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.

    9. Apply the class to some text by using span or paragraph tags.
    10. Download another font from 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.
    11. Link your newly created webfonts.html to your index. If you don’t remember how to link, refer to a previous lesson.
    12. Congratulations. You have just added another useful tool to your growing skill set of web development techniques.