css-fonts

Typefaces

• script: handwriting style
• decorative
• monospace: occupy same space
• serif: traditional and formal
• sans serif: modern

font-family
This option is displayed as a list with the first being higher priority

• will fallback to the others if not installed

Generic fonts include serif, sans-serif, monospace, cursive, fantasy
Web-safe fonts are fonts that are installed on most devices

font-weight
Determines how thick or thin the characters are, value from 100 to 900

• can also be bold or normal

font-style
Determines if the text is italic or normal.
font-size
Changes the size of the text, can be in pixels, ems, or percentages

• em is relative to the parent element, 1em is the same size as the parent
• rem is relative to the root or the html element
• the recommended is rem for responsive design

text-align
Aligns the text to the left, right, center, or justified
text-transform
Changes the case of the text, can be uppercase, lowercase, or capitalize
line-height
Determines the space between lines of text, can be absolute or relative

• 1.5 is 1.5 times the font size

letter-spacing
Determines the space between characters, can be positive or negative or relative to the font size

Web-Fonts
Web fonts are added to the website using the @font-face rule

@font-face {
  font-family: 'CustomFont';
  src: url('MyCustomFont.ttf'), url('MyCustomFont.woff'),
       url('https://example.com/MyCustomFont.woff2');
}
* {
  font-family: 'CustomFont', sans-serif;
}

• custom fonts can be added using the src property

Other custom webfonts such as Google Fonts can be added using the link tag in the HTML file