Text & Fonts›Extra· 30 min read

Web Fonts & Icons

Use beautiful custom fonts from Google Fonts and add crisp icons without image files.

What you will learn

Add a Google Font to a page
Apply the custom font
Add icons with an icon library

Google Fonts in two steps

Go to fonts.google.com, pick a font, and copy its <link> into your <head>. Then use it in CSS with font-family.

Step 1: link the font in the head

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>

These <link> tags go in your <head>. The important one ends in rel="stylesheet" — it points at a Google Fonts URL that loads the Poppins font in two weights (400 = normal, 700 = bold). The preconnect line is a small speed hint that warms up the connection to Google early. After this, the font is downloaded but not yet used — you still have to apply it in CSS.

The whole process is two steps:

On fonts.google.com, pick a font, choose the weights you want, and copy the <link> it gives you into your HTML <head> (the code above).
In your CSS, apply the font by name with font-family: 'Poppins', sans-serif (the code below). Keep a generic fallback in case the font fails to load.

Step 2: use it (here via @import so it runs live)

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
  .fancy { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 700; color:#4338ca; }
</style>
<p class="fancy">This uses the Poppins web font.</p>

Live preview

The @import url(...) line at the top is just another way to load the same font from inside CSS (used here so the live preview works in one block). The line that applies it is font-family: 'Poppins', sans-serif — once the font is loaded, you reference it by name exactly like any other font. The paragraph now renders in Poppins, bold and indigo.

Icons

Icon libraries like Font Awesome, Bootstrap Icons or Google Material Icons give you thousands of scalable icons. You add their stylesheet, then drop in an <i> or <span> with the right class.

The pattern looks like this — link the library once, then place an empty tag whose class name picks the icon:

Adding icons from a library

<!-- 1. link the icon library in the <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

<!-- 2. show icons by class name, size/colour with CSS -->
<i class="bi bi-heart" style="color:#ef4444; font-size:24px;"></i>
<i class="bi bi-star" style="color:#f59e0b; font-size:24px;"></i>

The <i> tags are empty — the icon comes entirely from the class name (bi bi-heart = a heart, bi bi-star = a star). Because an icon font behaves like text, you size it with font-size and colour it with color, just like a letter. Swap the class and you get a different icon; no new image needed.

Note: Icon fonts and SVG icons scale sharply at any size and can be coloured with the CSS color property — far better than tiny image files.

Tip: Use display=swap in the Google Fonts URL so text shows in a fallback font immediately and swaps when the custom font loads — better for speed and user experience.

Q. After linking a Google Font, how do you apply it?

Answer: Link the font in the <head>, then reference its name in CSS with font-family, e.g. font-family: "Poppins", sans-serif.

✍️ Practice

Add a Google Font to a page and apply it to your headings.
Add an icon library and place three icons on a page.

🏠 Homework

Restyle your profile page with a Google Font pairing and a couple of icons.