Return to Kroll Design home page

CSS custom fonts

 
« Return

See also:

Web pages are often lacking in the "variety of fonts" department, because traditionally, web developers and designers want to use common fonts that are installed on the vast majority of the computers, so that the results are predictable for visitors to their site. So you'll therefore see a large quantity of sites that use fonts like Arial and Verdana. However, other fonts can be used, as long as the license for the font in question allows you to embed it on a website. So before using the technique shown here, make sure that the license allows you to use the font. For example, below I use the custom font "Hemi Head 426", which is a freeware font by Ray Larabie available from www.1001fonts.com

Step 1: Upload the font to your web site. In this example, I uploaded the font files 'hemihead.ttf' and 'hemihead.eot' to the '/tech/css' folder of my site. The .ttf (True Type Font) file is the original font file, but versions of Internet Explorer prior to IE9 do not support embedded .ttf fonts, so I also had to convert the .ttf file to .eot and upload that too. To convert the .ttf file to .eot, I used a utility available at website http://www.kirsle.net/wizards/ttf2eot.cgi.

For this example, the CSS and font files are in the same folder as the HTML file, so that the code shown below is not cluttered with file paths (not to mention that things are more likely to break if you have all sorts of file paths that may or may not be correct).

Step 2: Use the following CSS to define a font-family for the uploaded font files:

@font-face {
font-family: hemi_head_426;
src: url("hemihead.eot") /* EOT file for IE */
}
@font-face {
font-family: hemi_head_426;
src: url("hemihead.ttf") /* TTF file for CSS3 browsers */
}

.hemihead {
font-family: hemi_head_426,verdana,sans-serif;
}

If it's working correctly, this font, which is live text…

The quick brown fox jumps over the lazy dog

…should look very similar to this graphic image:

However, note that in the font-family definition, I included the 'fallback' fonts of verdana and sans-serif, in case the custom font does not work for some reason.

So that's a technique for spicing up your website with some additional fonts.

Or, since Google is so pervasive, you could also choose one of their free fonts, see their website for instructions for embedding the font code:
https://www.google.com/fonts/
If you use the @import option, make sure that the @import statement is at the very top of your stylesheet.




 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 05/15/2016 1:19 AM