CSS - Fonts: A Comprehensive Guide for Beginners

Hello there, aspiring web developers! Today, we're going to dive into the wonderful world of CSS fonts. As your friendly neighborhood computer teacher, I'm here to guide you through this journey step by step. So, grab a cup of coffee (or tea, if that's your thing), and let's get started!

CSS - Fonts

Introduction to CSS Fonts

Before we jump into the nitty-gritty, let's talk about why fonts are so important. Imagine you're reading a book written entirely in Comic Sans - not the most pleasant experience, right? That's why choosing the right font for your website is crucial. It's like picking the perfect outfit for a first date - you want to make a good impression!

CSS Font Shorthand

Let's start with a handy little trick called the font shorthand. It's like a Swiss Army knife for font styling - compact and versatile!

body {
  font: italic small-caps bold 16px/2 Arial, sans-serif;
}

This single line sets multiple font properties at once. Let's break it down:

italic: font style
small-caps: font variant
bold: font weight
16px: font size
2: line height
Arial, sans-serif: font family

Pretty neat, huh? It's like ordering a combo meal instead of individual items!

CSS Fonts - With Multiple Values

Sometimes, one font just isn't enough. That's where multiple values come in handy:

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

This is like having a backup plan. If "Trebuchet MS" isn't available, it'll try Verdana, and if that fails too, it'll use any sans-serif font available.

CSS Fonts - Font Family

Speaking of font families, let's dive a bit deeper:

h1 {
  font-family: Georgia, serif;
}
p {
  font-family: Arial, sans-serif;
}

Here, we're using different font families for headings and paragraphs. It's like dressing up your headings in a fancy suit while keeping your paragraphs in smart casual!

CSS Fonts - Font Feature Settings

Now, let's get fancy with font feature settings:

p {
  font-feature-settings: "smcp" on, "swsh" 2;
}

This activates small caps and sets swash to level 2. It's like giving your fonts superpowers!

CSS Fonts - With font-feature-settings Property

Let's look at another example of font-feature-settings:

.stylish-text {
  font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

This enables standard ligatures, discretionary ligatures, and historical ligatures. It's like turning your text into a calligraphy masterpiece!

CSS Fonts - Font Kerning

Kerning is all about the space between characters:

.kerned-text {
  font-kerning: normal;
}

This ensures proper spacing between letters. It's like giving your text room to breathe!

CSS Fonts - Font Language Override

Sometimes, you need to override the language settings:

.japanese-text {
  font-language-override: "JAN";
}

This tells the browser to use Japanese-specific glyph variants. It's like telling your text to speak Japanese!

CSS Fonts - Font Optical Sizing

Optical sizing adjusts the font based on its size:

.headline {
  font-optical-sizing: auto;
}

This allows the font to optimize its appearance at different sizes. It's like having a shape-shifting font!

CSS Fonts - Font Palette

Font palettes let you use predefined color schemes:

@font-palette-values --custom-palette {
  font-family: Pixelify Sans;
  base-palette: 1;
}

.colored-text {
  font-palette: --custom-palette;
}

This applies a custom color palette to your font. It's like giving your text a makeover!

CSS Fonts - Font Size

Font size is pretty straightforward:

body {
  font-size: 16px;
}
h1 {
  font-size: 2em;
}

Here, we set a base size for the body and make headings twice as large. It's like having a growth potion for your text!

CSS Fonts - Font Size Adjust

Font size adjust helps maintain readability across different fonts:

.adjusted-text {
  font-size-adjust: 0.5;
}

This adjusts the font size based on the x-height. It's like giving your text a pair of platform shoes!

CSS Fonts - Font Stretch

Font stretch allows you to compress or expand your font:

.stretched-text {
  font-stretch: extra-expanded;
}

This makes your text wider. It's like your text hit the gym and bulked up!

CSS Fonts - With font-style Property

Font style lets you italicize your text:

.emphasized {
  font-style: italic;
}

This gives your text a slant. It's like your text is leaning in to whisper a secret!

CSS Fonts - With font-weight Property

Font weight controls how bold your text is:

.important {
  font-weight: bold;
}

This makes your text stand out. It's like your text is flexing its muscles!

CSS Fonts - With font-synthesis Property

Font synthesis controls how browsers create bold or italic versions of a font:

.no-fake-bold {
  font-synthesis: none;
}

This prevents browsers from creating a synthetic bold version. It's like telling your browser, "No fake it till you make it!"

CSS Fonts - With font-variant Property

Font variant lets you use alternative glyphs:

.smallcaps {
  font-variant: small-caps;
}

This turns lowercase letters into small uppercase letters. It's like your text is wearing a tiny tuxedo!

CSS Fonts - With font-variation-settings Property

Font variation settings give you fine-grained control over variable fonts:

.custom-font {
  font-variation-settings: "wght" 375, "wdth" 80;
}

This sets custom weight and width values. It's like having a made-to-measure suit for your text!

CSS Line Height

Line height controls the space between lines of text:

p {
  line-height: 1.5;
}

This sets the line height to 1.5 times the font size. It's like giving your text room to stretch its legs!

CSS Fonts - Google Fonts

Google Fonts is a treasure trove of free, web-friendly fonts:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

This imports and uses the Roboto font. It's like having a personal font stylist!

CSS Fonts - Fallback Fonts

Always provide fallback fonts:

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

This ensures your text always looks good, even if your preferred font isn't available. It's like having a backup plan for your backup plan!

CSS Fonts - Summary

Here's a quick summary of all the font properties we've covered:

Property	Description	Example
font	Shorthand for multiple font properties	`font: italic bold 16px/2 Arial, sans-serif;`
font-family	Specifies the font family	`font-family: Arial, sans-serif;`
font-feature-settings	Controls advanced typographic features	`font-feature-settings: "smcp" on;`
font-kerning	Controls font kerning	`font-kerning: normal;`
font-language-override	Overrides language-specific glyph substitution	`font-language-override: "JAN";`
font-optical-sizing	Controls optical size adjustment	`font-optical-sizing: auto;`
font-palette	Specifies a font palette	`font-palette: --custom-palette;`
font-size	Sets the font size	`font-size: 16px;`
font-size-adjust	Adjusts font size based on x-height	`font-size-adjust: 0.5;`
font-stretch	Controls font stretching	`font-stretch: extra-expanded;`
font-style	Sets the font style (normal, italic, oblique)	`font-style: italic;`
font-weight	Sets the font weight	`font-weight: bold;`
font-synthesis	Controls synthesis of font faces	`font-synthesis: none;`
font-variant	Specifies font variant	`font-variant: small-caps;`
font-variation-settings	Controls variable font characteristics	`font-variation-settings: "wght" 375;`
line-height	Sets the line height	`line-height: 1.5;`

And there you have it, folks! A comprehensive guide to CSS fonts. Remember, typography is an art form, and now you have the tools to become a true artist. Happy coding, and may your fonts always be fabulous!

Credits: Image by storyset