Intro to Web Design & Development
  • Course Info
  • Modules
    • Introduction
    • Project 1

    • Topic 1
    • Topic 2
    • Topic 3
    • Project 2

    • Topic 4
    • Topic 5
    • Topic 6
    • Topic 7
    • Project 3

    • Topic 8
    • Topic 9
    • Topic 10
    • Finals
  • FAQs & Walkthroughs

Current Assignment(s)

A7: Typography
Due: Recommended by Monday, 6.04

"Typography"

    Topic 09 Overview

01. Typography

    Typography Typefaces Font Categories TODO

02. Using Fonts

    The font-family Property Fallback Fonts and Stacks Making Font Choices TODO

03. Sizing

    Setting Size Fixed Size Relative Size Using Sizes TODO

04. Adding Meaning

    Setting Bold and Italic Font Weight Font Style Using Weights and Styles TODO

05. Decorating

    Font Variant Text Transform Text Decoration TODO

06. Spacing

    "Space: The Final Font-tier..." Leading Kerning Tracking Word Spacing TODO

07. Alignment

    Horizontal Alignment Vertical Alignment Indentation TODO

08. Pseudos

    Pseudo-Selectors Pseudo-Elements Pseudo-Classes Setting States TODO

09. Self-Hosted Fonts

    Including Fonts Fonts Directory Fonts Stylesheet The @font-face Selector Family Source Other Properties The @font-face Rule TODO

10. Library-Hosted Fonts

    Sourcing Fonts Navigating Google Fonts Option A - Downloading Fonts Option B - Standard Embeds Option C - @import Embeds TODO

The @font-face Selector

25% Complete (success)

@font-face {
font-family: '...';
src: url('#') format('...');
font-weight: ;
font-style: ;
}

To include an external font, you first must tell the browser to load the font and what to refer to it as. To do this, use the @font-face rule in your CSS.

This rule is formatted like other CSS selectors, but instead of being used to alter HTML elements, it is used to load in data for CSS to use.


  • ← Previous
  • Next →

Intro to Web Design & Development 2018 | The University of Montana School of Media Arts