Tuesday, January 7, 2014

font-face

Thank goodness we can use any fonts we want on the web now.  Here is the easiest way I have found to get the font you want for your website and how to make sure all browsers can use it.  Font Squirrel makes it super easy:
  1.   Download your font on Font Squirrel or another site, it can be any of the following file formats:  *.eot, *.woff, *.ttf, *.svg.  Make sure the license enables you to use this font!
  2. Navigate to Font-Squirrels Web Font Generator and add fonts with the 'add fonts' button.  
  3. After you have uploaded the fonts for your site, choose the 'optimal' radio button, and click 'Download your kit'.
  4. The generator not only gives you all the file types you need to be cross browser compatible, but it also gives you an HTML and CSS file that gives a perfect example of how to use it.
  5. Place ALL of the font files in a fonts directory.
  6. Grab the @font-face rule from the CSS file and use it in your own CSS file for your project.  Keep in mind that the url path is relative to your CSS file, so modify the path as appropriate.  Here is the CSS for reference:
    @font-face { font-family: 'ralewaybold'; src: url('fonts/raleway-bold-webfont.eot'); src: url('fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/raleway-bold-webfont.woff') format('woff'), url('fonts/raleway-bold-webfont.ttf') format('truetype'), url('fonts/raleway-bold-webfont.svg#ralewaybold') format('svg'); font-weight: normal; font-style: normal; }
  7. Use the font face now.  I set it in my body tag, making it the default font for the site:  body { font-family: ralewaybold, Verdana, Helvetica, Sans-Serif;
  8. Enjoy your non-standard font!

No comments:

Post a Comment