CSS Fonts Tutorial - font-family, font-size, Google Fonts

Text Properties

Property	Values	Description
`color`	any color	Text color
`text-align`	`left \| right \| center \| justify`	Horizontal alignment
`text-decoration`	`none \| underline \| overline \| line-through`	Text decoration line
`text-transform`	`uppercase \| lowercase \| capitalize \| none`	Case transformation
`text-indent`	`20px \| 2em`	First line indent
`letter-spacing`	`2px \| -1px`	Space between characters
`word-spacing`	`5px`	Space between words
`line-height`	`1.5 \| 24px \| 150%`	Space between lines
`white-space`	`normal \| nowrap \| pre \| pre-wrap`	Whitespace handling
`text-overflow`	`clip \| ellipsis`	Overflow text handling
`text-shadow`	`h v blur color`	Shadow behind text

Text Properties - Examples

/* Text alignment */
.center  { text-align: center; }
.justify { text-align: justify; }

/* Text decoration */
a { text-decoration: none; }           /* remove underline from links */
del { text-decoration: line-through; }
.underline { text-decoration: underline dotted red; }

/* Text transform */
.uppercase  { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* Spacing */
.heading {
    letter-spacing: 3px;   /* tracking */
    word-spacing: 5px;
    line-height: 1.6;      /* unitless - relative to font-size */
}

/* Text overflow - truncate with ellipsis */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Text shadow: offset-x offset-y blur-radius color */
.shadow-text {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.glow-text {
    text-shadow: 0 0 10px #3498db, 0 0 20px #3498db;
}

/* Writing mode */
.vertical { writing-mode: vertical-rl; }

/* Text indent */
p { text-indent: 2em; }

Font Properties

Property	Values	Description
`font-family`	`'Arial', sans-serif`	Font stack (fallbacks)
`font-size`	`16px \| 1rem \| 1.2em \| 120%`	Text size
`font-weight`	`normal \| bold \| 100-900`	Thickness
`font-style`	`normal \| italic \| oblique`	Italic/oblique
`font-variant`	`normal \| small-caps`	Small caps
`font`	shorthand	All font properties

Font Properties and Google Fonts

/* Font family - always provide fallbacks */
body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
.code {
    font-family: 'Fira Code', 'Courier New', monospace;
}
.serif {
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Font size */
html { font-size: 16px; }   /* base size */
h1   { font-size: 2.5rem; } /* 40px */
h2   { font-size: 2rem; }   /* 32px */
p    { font-size: 1rem; }   /* 16px */
small { font-size: 0.875rem; } /* 14px */

/* Font weight */
.thin    { font-weight: 100; }
.regular { font-weight: 400; }
.bold    { font-weight: 700; }
.black   { font-weight: 900; }

/* Font shorthand: style variant weight size/line-height family */
h1 {
    font: italic small-caps bold 2rem/1.2 'Georgia', serif;
}

/* @font-face - custom fonts */
@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* prevents invisible text during load */
}

<!-- Google Fonts - add in <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=Roboto:wght@300;400;700&family=Open+Sans&display=swap" rel="stylesheet">

<style>
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}
</style>