Best Web Font Sources

  • Topics:

    • In this post, I will provide an overview of some of the best web font sources. For past posts on some of the differences between print and web typography, be sure to check out Andrew and Lisa‘s past posts.

    Computers have a selection of system fonts that can be used to display content from the web. Some common system fonts are Arial and Times New Roman. If a developer chooses something more specialized, and the viewer doesn’t have that specific font in their system, the browser will choose a default from the user’s computer.

    This is set up in a css file like so:

    p{
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
	}

    Notice I have more than one font specified in the font-family property. If someone opens my page on a browser that does not support “Lucida Sans Unicode”, then it tries “Lucida Grande” next, and sans-serif as a last resort. This helps me to exercise some degree of control on what users see when they go to my page. These multiple options are called fallbacks.

    @font-face

    If you get bored with the same old system fonts, you can choose a different typeface with the @font-face property. @font-face is pretty great because it does not require any javascript and allows you to choose more than just the most dependable system fonts.

    Applying @font-face with Font Squirrel

    Say I want to use the font “WoodenNickelBlack” for my Nickelback fan page. First I download the font from Font Squirrel. Any True Type Font file will work, but I like Font Squirrel because all the fonts are free for commercial use. Then, I go to the Webfont Generator at Font Squirrel, upload my font, and download my kit. This method allows you to locally host your fonts. Put that kit in your css folder and then you can reference it with:

    @font-face{
	font-family: WoodenNickelBlack;
	src: url(http://www.iluvnickelback.com/fonts/WoodenNickelBlack.otf );
	font-weight: 400;
	}

    and then:

    p{
	font-family: WoodenNickelBlack, Helvetica, Arial, sans-serif; 	
	}

    When using the @font-face declaration, it is important to define your desired weight with a font weight property such as:

    @font-face{
	font-weight:light;  
	}

    or:

    @font-face{
	font-weight:100;  
	}

    Some other options are:

    font-weight:regular;/font-weight:400;
font-weight:bold;/font-weight:800

     

    Typekit by Adobe

    Instead of loading the type from the user’s computer or from the developer’s local files, designers can source type from sites like Google or Typekit by Adobe.

    How it works:

    Load Javascript Library

    <!--jQuery--> 
<!--Load JQuery Library-->  
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    Launch the kit editor to add a font to your account. Typekit will generate a unique script file that is associated with your account, so that you can utilize the selectors of your chosen fonts in your @font-face declaration.

    <script type="text/javascript" src="//use.typekit.net/tpu6ejx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

    The web is becoming increasingly customizable, so take advantage of these resources to help your site rise above the rest!

    In Design, Development