skip navigation

Type & Fonts

Tagged in: design
Grouped in: fonts

You can embed fonts from other sites. The most well known is Google. However if you prefer an alternative, Open Font Library is a good option that has been serving fonts for many years.

Choosing a Typeface

When choosing a typeface there are different formats. These are, in decending order of preference: Web Open Font Format 2", “WOFF2, Web Open Font Format”, “WOFF, OpenType Font”, “OTF, TrueType”, “TT. The WOFF fonts are compressed OTF fonts, version 2 offering slightly better compression. Compression means the fonts should load faster.

When choosing a body font look for one that has different versions. The basic 4 are regular, bold, italic and bold-italic. You can define these in your CSS declarations for em, i, strong and b. These are preferable to the emulated bold and italic the system will generate if there is no specific font available. Other styles include light or extra-light, extra-heavy or black, and condensed or stretched variations.

If you want to see how a font looks at different sizes just use your browser’s zoom function.

Pros and Cons

The advantages of embedding fonts from a different site include:

  • It’s quicker. Just add the code and you’re done. No downloading, unzipping and uploading font files.
  • Less storage and more importantly less bandwidth used by your site.
  • Hopefully faster page loading times, depending of your host.

The disadvantages are:

  • If the site goes down or offline your site will lose it’s typeface and default to a different version. If this is of concern you can get around this by downloading the same font and keeping it on your site. Give a different name from the original and use it as your second fallback font. This of course negates the first advantage but not the second two.
  • Your site users are unlikely to be aware of their link to the remote font site. This is probably not an issue with Font Library but could be with a massive data collection service like Google.

How to set up Open Font Library fonts

To link to these fonts there are instructions in the right hand column. However these give a link to to be placed in the head section of every page. Assuming you’re going to use the font on several different pages you can use the <span class=“code”, “@import rule. This means you can link to the font in your main style sheet for your whole site with just one line of text:

@import url("https://fontlibrary.org/face/sansus-webissimo")

Note this is one of the few bits of CSS where there is no use of curly brackets.

You then need to get the other bit of code from the Font Library font page, crucially to get the name used for that particular font:

{
   font-family: 'SansusWebissimoRegular';
   font-weight: normal;
   font-style: normal;
}

Generally all the fonts of a given family will be contained in the main file linked to above. However to use them you must infer their names. So in the above example, SansusWebissimoRegular for the italic version it’s SansusWebissimoItalic. There is no bold version of this particular font at but generally the same patteren would be followed, ie. SansusWebissimoBold.

Font selection

Some Open Font Library fonts I like:

  • renner is based on the classic Futura font. This OpenType typeface comes in 12 styles of different weights and regular and italic versions.
  • u001 is a TrueType Univers clone with 8 styles including condensed varients.
  • montserrat is another beautiful sans, and named after a neighbourhood in Buenos Aires. This is currently version 7 of the font and it comes in a whopping 18 styles from Thin and Extra Light to Extra Bold and Black.
  • coelacanth a serif with 37 different versions. The bold version looks old.
  • libre-bodoni a free version of the classic modern font in the 4 main styles.
  • gfs-bodoni another version of Bodoni in 4 main styles.
  • averia unusual kind of melted semi-serif font.
  • source-serif-pro a nice Adobe serif. No italic version but comes in 6 different weights from extra-light to black.
  • avrile-serif is a nice old style in 18 different weight versions.
  • pt-serif a humanist transitional in 6 styles.
  • sean-slab the ultimate slab font. The OpenType comes in 27 different styles from condensed to wide and from light to black.
  • dejavu-sans-mono an attractive mono in 4 styles.
  • source-code-pro is an OpenType, sans monotype from Adobe with 14 styles.
  • source-sans-pro is a distinctive sans designed for interfaces by Adobe. Comes in 14 styles from extra light to black.
  • Argon a rough handwriting script.
  • profaisal-elitetahreerv1-0 a typewriter font complete with grunge style imperfections. 1 varient and TrueType. For a heavier type in the same style there is GNUTypewriter
  • gl-tsukiji-5go is a worn grungy oldstyle with lots of imperfections.
  • orthoventional is a another deliberately imperfect font] this one based on a modern font. 1 style, OpenType.

Retro Type

The oldest typefaces, aside from blackletter, are those from the Old Style group. However because these are still used extensively today they don’t give the appearence of vintage styling at all. The best one can do is to choose body type based on it’s difference from the norm today. Type can be tweaked by using different weights, letter spacing, line height, color and more general graphic design styles like use of white space. Condensed styles, often in all caps also a good bet for subheads, menus etc.

Focus on choosing a good display type as there is more choice here. Also focus on other graphic elements too like icons and ornaments, use of colour and maybe some grungey texture to highlight the font’s historical period.

☝