Skip to main content

Web Fonts and Icons

Modern web design isn't limited to the "web-safe" fonts installed on a user's machine.

1. Google Fonts​

The easiest way to use custom fonts is via Google Fonts.

How to use:​

  1. In HTML <head>: 
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  2. In CSS: 
    body { font-family: 'Roboto', sans-serif; }

2. @font-face​

If you have a local font file (e.g., .woff2), you can use @font-face.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

3. Font Loading Best Practices​

  • Font-Display: Use font-display: swap; to show fallback text while the custom font loads.
  • Formats: Always provide .woff2 as it is the most optimized format for the web.

4. Icons​

Icons can be added to a web page using icon libraries like Font Awesome or Google Icons.

<!-- Font Awesome -->
<i class="fas fa-heart"></i>

<!-- Google Icons -->
<span class="material-icons">face</span>

[!TIP] Modern websites often favor SVG Icons over Icon Fonts because they are more accessible, crisp on all resolutions, and allow for finer CSS control.