Web Fonts

Your Browser & Typefaces

Web Typography Workshop @ Letterform Archive
Week 2

Loading Fonts

  1. Core web fonts (The public has the font files)
  2. Self-hosted (You have the font files)
  3. Distributor-hosted (ie. Type Network)
  4. Subscription-based (Adobe, Google)

Core Web Fonts

font-family fallback assignment
Arial sans-serif
Helvetica sans-serif
Comic Sans MS cursive
Courier monospace
Georgia serif
Impact sans-serif
Tahoma sans-serif
Times New Roman serif
Webdings

Self-hosted

Use the @font-face rule to link to typefaces in your website folder.

					
@font-face{
	font-family: 'Occupant Oldstyle';
	src: url('fonts/OccupantOldstyle-Medium-Trial.woff2') format('woff2');
	font-weight: 400;
}
@font-face{
	font-family: 'Occupant Oldstyle';
	src: url('fonts/OccupantOldstyle-MediumItalic-Trial.woff2') format('woff2');
	font-style: italic;
	font-weight: 400;
}
				
body {
	font-family: 'Occupant Oldstyle'; 
	/*this name should match the font-face rule you set up*/
}

Anatomy of a @font-face assignment

font-family How you will refer to this font (the font name) 'Occupant Oldstyle'; (Note that font names containing spaces should be wrapped in quote marks)
src The path to the font file relative to the stylesheet, and the format (optional) url('fonts/OccupantOldstyle-Medium-Trial.woff2') format('woff2');
font-style Whether it is the roman or italic of the font. By default, it is assumed to roman. normal(default) or
italic
font-weight Weight keywords or numerical values (recommended) normal(default) or bold
1–1000

Font Weight Values

ValueCommon weight name
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
You do not have to follow this guide, but know that 400 usually the default, normal weight of a typeface. Using this standard helps you reference the correct font within your own code.

Font Stretch Values (if applicable)

Valuekeyword
50%ultra-condensed
62.5%extra-condensed
75%condensed
87.5%semi-condensed
100%normal
112.5%semi-expanded
125%expanded
150%extra-expanded
200%ultra-expanded
Width styles are declared in percentages; the default width is at 100%. Unlike weight values names, these CSS keywords may not match the font family name.

Adobe

  1. Navigate to Adobe Fonts
  2. Click on Add to Web Project
  3. Create a new web project
  4. Copy-paste the resulting code

CSS

body {
	font-family: "fit", sans-serif;
	font-variation-settings: "wdth" 482;
}

HTML HEAD

<link rel="stylesheet" href="https://use.typekit.net/znz4odv.css">

Google

  1. Navigate to Google Fonts
  2. Select a Style of a font
  3. Copy-paste the resulting code

CSS

body {
	font-family: 'Fraunces', serif;
}

HTML HEAD

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz@9..144&display=swap" rel="stylesheet">

Variable Fonts

Variable fonts are a new format (c. 2016) that allows multiple styles of a font to be embedded into a single font. Browsers were the first to adopt support for this new font format. More on expressive advantages of variable fonts.

Variable fonts

Including variable fonts works similarly, where multiple values are accepted for font-weight or font-stretch if applicable to define the possible range within the font. The format is updated to woff2-variations. 

					
@font-face{
	font-family: 'Occupant Oldstyle VF';
	src: url('fonts/OccupantOldstyle-VF-Roman-Trial.woff2') format('woff2-variations');
	font-weight: 200 700;
}
@font-face{
	font-family: 'Magmatic VF';
	src: url('fonts/Magmatic-VF-Trial.woff2') format('woff2-variations');
	font-stretch: 50% 150%;
	font-weight: 100 900;
}
				
body {
	font-family: 'Occupant Oldstyle VF';
}

Standard Axis Tags

Axis Tag Description Valid Range CSS Equivalent
wght weight 1—1000 font-weight
wdth width >0, % of normal width font-stretch
opsz optical sizing >0, point sizes
ital italicization 0—1 font-style
slnt slant -90—90 font-style

Understanding the Axes

Use a font like Font Goggles or an online tool like Wakami Fondue to understand the variable range of your typeface. (For Adobe/Google hosted fonts, check out the font detail pages for this info.)

Using Variation Settings

The font-variation-settings is the CSS property for accessing the variable font settings. It is followed by comma-separated assignments for each axis, in the format 'key' numericvalue. 


body{
	font-family: 'Variable Font'; 						
	font-variation-settings: 'wght' 400;
}

h1{
	font-family: 'Another Multi-axis Variable Font';								
	font-variation-settings: 'wght' 300,'wdth' 120,'XHGT' 100; 
}

Using CSS Variables

It can be useful to setup CSS variables to assign into the font-variation-settings so that you can adjust each axis individually at each element. You can define CSS Variables by prefixing names with --. 


:root{
	--wght: 400;
	--wdth: 100;
	--XHGT: 0;
}

body{
	font-family: 'Variable Font';
	font-variation-settings: 'wght' var(--wght);
}

h1{
	font-family: 'Another Multi-axis Variable Font';								
	font-variation-settings: 'wght' var(--wght),
	'wdth' var(--wdth),'XHGT' var(--XHGT); 
}
Assigning font-variation-settings with CSS variables

Exercise: Style your text

Load a typeface and style the text you marked up in the first exercise.

  1. Make a copy of the folder containing your marked-up html page, and rename to code
  2. Create an external stylesheet, called style.css (make sure to add the .css extension)
  3. Connect your stylesheet to your html page using the link tag
  4. Write your CSS to style your markup. You might find that you want to change your markup in the process.
  5. Setup a webfont to use with your webpage, using th @font-face rule.