How to Host Fonts Locally in Your Web Project

In today's web development landscape, typography plays a crucial role in design and user experience. While it's convenient to use hosted font services like Google Fonts, there are compelling reasons to consider hosting fonts locally on your server. This approach can improve page load times, reduce external dependencies, and help with data privacy compliance. In this post, we'll walk through the process of hosting fonts locally in your web project.

Why Host Fonts Locally?

Before we dive into the how-to, let's briefly discuss why you might want to host fonts locally:

1. Performance: Local fonts can load faster, especially on repeat visits.
2. Privacy: No need to connect to external services, which can be a concern for GDPR compliance.
3. Reliability: Your fonts will always be available, regardless of external service uptime.
4. Offline functionality: Local fonts work even when the user is offline.

Step-by-Step Guide to Hosting Fonts Locally

1. Choose and Download Your Font

First, select the font you want to use.

Many font foundries offer web font packages for download. For this example, we'll use the popular open-source font, Roboto.

2. Prepare Your Font Files

Web fonts typically come in several formats. The most common are:

• WOFF2 (.woff2)
• WOFF (.woff)
• TTF (.ttf)
• EOT (.eot) for older IE support

Place these files in a directory in your project, e.g., /fonts/roboto/.

3. Create a CSS File for Font Declarations

Create a new CSS file (e.g., fonts.css) and add the following:

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/roboto-regular.woff2') format('woff2'),
       url('/fonts/roboto/roboto-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto/roboto-bold.woff2') format('woff2'),
       url('/fonts/roboto/roboto-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Add more @font-face rules for other weights and styles */

4. Link the Font CSS in Your HTML

In your HTML file, add a link to your fonts.css file:

<link rel="stylesheet" href="/path/to/fonts.css">

5. Use the Font in Your Stylesheets

Now you can use the font in your CSS:

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

6. Optimize for Performance

To further improve performance:

• Use font-display: swap; to ensure text is visible while fonts are loading.
• Consider using a font loading strategy like the Font Loading API or a library like FontFace Observer.
• Subset your fonts to include only the characters you need.

NPM & Fontsource

Fontsource is a collection of open-source fonts that are packaged into individual NPM packages for self-hosting in your web applications.

More information can be found:

https://fontsource.org/docs/getting-started/introduction

TailwindCSS + 11ty + Fontsource

• Install via npm

npm install @fontsource/poppins

• Create new 'fonts.css' file

• Within fonts.css, you would have something like

@import '@fontsource/poppins';

• Within your 'styles.css', you would import

@import './fonts.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

• create a custom class for poppins in your tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [
    // ... other plugins
  ],
};

• tailwind generates utility class

<p class="font-poppins">This text will use Poppins font.</p>

• For more semantic class name, something like this in your styles.css

@layer utilities {
  .text-poppins {
    font-family: 'Poppins', sans-serif;
  }
}

• used in HTML

<p class="text-poppins">This text will use Poppins font.</p>

Local fonts

Hosting fonts locally gives you more control over your web project's performance and user privacy.

While it requires a bit more setup than using a hosted service, the benefits can be significant, especially for projects with specific performance or privacy requirements.