2 Typography W O R K S H O P 

Where to Get Fonts 1 

Hosted vs. Self-Hosted 

HOSTED With a hosted license, you reference a CSS resource link in the body of your HTML (or CSS) and the font provider serve the fonts to your site from their content-delivery network. 

SELF-HOSTED With a self-hosted license, you download the web font files from the font provider and host them on your servers. 

HOSTED (SUBSCRIPTIONS) Google Fonts (free) Adobe Typekit (free & paid) Fonts.com (free & paid) Cloud.typography (paid) Type Network (paid) 

SELF-HOSTED Google Fonts (free) Type Network (paid) MyFonts (free & paid) Linotype (paid) FontShop (free & paid) 

Loading Fonts 2 

FONT FILE TYPES .eot (only for Internet Explorer) .svg (deprecated; no longer in use) .ttf (TrueType Font) .woff (2nd best option) .woff2 (1st best option) 

LOADING FONTS Loading fonts from your server in CSS (self-hosted) @font-face {
 font-family: Elena, serif;
 src: url(elena-regular.woff2) format(“woff2”),
 url(elena-regular.woff) format(“woff”),
 url(elena-regular.otf) format(“opentype”);
 font-weight: normal;
 } 

LOADING FONTS Another example: @font-face {
 font-family: ‘Fanwood Text’, serif;
 src: url(fanwood_text.woff2) format(“woff2”),
 url(fanwood_text.woff) format(“woff”),
 url(fanwood_text.otf) format(“opentype”);
 font-weight: normal;
 } 

LOADING FONTS Italic font: @font-face {
 font-family: ‘Fanwood Text’, serif;
 src: url(fanwood_text_italic.woff2) format(“woff2”),
 url(fanwood_text_italic.woff) format(“woff”),
 url(fanwood_text_italic.otf) format(“opentype”);
 font-weight: normal;
 font-style: italic;
 } 

LOADING FONTS Bold font: @font-face {
 font-family: ‘Open Sans’, serif;
 src: url(open_sans_bold.woff2) format(“woff2”),
 url(open_sans_bold.woff) format(“woff”),
 url(open_sans_bold.otf) format(“opentype”);
 font-weight: bold; /* Or use 700 */
 } 

LOADING FONTS Conditional Loading (selecting characters): @font-face {
 font-family: Spumante;
 src: url(spumante.woff) format(“woff”)
 unicode-range: U+26; /* Only loads the ampersand ‘&’ */
 } U+26, U+23 (loads ‘&’ and ‘#’ characters)
 U+30-39 (all latin digits)
 U+2? (wildcard: selects the range U+20-2F) Other Unicode Examples: 

GOOGLE FONTS 

GOOGLE FONTS 

GOOGLE FONTS 

TYPEKIT 

TYPEKIT 

TYPEKIT 

TYPEKIT Plugin: Typekit Fonts for WordPress 

Using Fonts in CSS 3 

CSS FONT PROPERTIES font-family: Choosing a font (Helvetica, Open Sans)
 generic-family: serif, sans-serif, cursive, fantasy, monospace font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; body { font-size: 18px; } p { font-size: 1em; } h1 { font-size: 2.75em; } font-size: The size of the font (px, em, rem) 

CSS FONT PROPERTIES font-style: normal, italic, or oblique font-weight: The weight of the font 
 (e.g. normal, bold, 100-900) text-align: Aligning the text (left, center, right, justified) text-transform: Changing the case of your text (lowercase, uppercase, capitalize) 

CSS FONT PROPERTIES text-shadow: Adding a shadow to your text .shadow { text-shadow: 2px 2px 6px rgba(50, 50, 80, 0.5); } 

CSS FONT PROPERTIES line-height: The spacing between the lines of text (leading) p { line-height: 1.4em; } h1 { letter-spacing: 0.08em; } letter-spacing: The spacing between the letters 
 (kerning, tracking) 

1 Where to Get Fonts Loading Fonts Using Fonts in CSS 2 3 

RESOURCES Better Web Typography (free email course)
 betterwebtype.com Webfont Handbook by Bram Stein
 abookapart.com/products/webfont-handbook HTML Arrows (Codes for special characters)
 htmlarrows.com Typewolf
 typewolf.com 

RESOURCES Type Scale (Calculator for sizing headings)
 type-scale.com Typecast (test fonts for free)
 typecast.com WhatFont (Chrome extension for identifying fonts on websites)
 ambr.in/3ORKkk 

Thank you!