🪴 Quartz 4.0

Search

SearchSearch

Tool - FontSource

May 20, 20243 min read

FontSource

title: Contents 
style: nestedList # TOC style (nestedList|inlineFirstLevel)
minLevel: 1 # Include headings from the specified level
maxLevel: 4 # Include headings up to the specified level
includeLinks: true # Make headings clickable
debugInConsole: false # Print debug info in Obsidian console

Overview

Sources:

FontSource is a collection of open-source fonts that are packaged into individual NPM packages for self-hosting in your web applications. This documentation outlines the benefits of using FontSource and how to get started.

Advantages

  1. Performance
    • Self-hosting fonts can significantly improve website performance by eliminating the extra latency caused by additional DNS resolution and TCP connection establishment that is required when using a CDN like Google Fonts. This can help to prevent doubled visual load times for simple websites, as benchmarked here and here.
  2. Version Locking
    • Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.
  3. Privacy
    • Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.
  4. Offline
    • Your fonts load offline. This feature is beneficial for Progressive Web Apps and situations where you have limited or no access to the internet.
  5. Additional Fonts
    • Support for fonts outside the Google Font ecosystem. This repository is constantly evolving with other Open Source fonts.

Installation

Pre-Requisites

Before proceeding with the installation, ensure that you are using a bundler, such as Vite or Webpack, to handle importing CSS into your final bundle. Please refer to the Fontsource Guides section to see detailed instructions for your preferred framework.

Variable Fonts

If your chosen font supports variable fonts, Fontsource highly recommends using them, especially when working with multiple weights, as it helps reduce bundle sizes. To learn more about using variable fonts, refer to the dedicated Variable Fonts guide.

To install a font, follow these steps:

  1. Choose the Font Package: Select the font package you wish to install. You can find a list of available fonts in the Fontsource directory. Each font package corresponds to a specific font.

  2. Install the Package: Use your preferred package manager (npm, yarn, pnpm, or bun) to install the font package. For example, to install the Open Sans font, run the following command:

# npm
npm install @fontsource/open-sans
 
# yarn
yarn add @fontsource/open-sans
 
# pnpm
pnpm add @fontsource/open-sans
 
# bun
bun add @fontsource/open-sans

Note:

Alternatively, you can download the font files yourself in each directory listing.

  1. Import the Font: In your application’s entry file, page, or site component, import the font package using the package name. For example, to import Open Sans into index.tsx, add the following code:
// src/index.tsx
import "@fontsource/open-sans"; // Defaults to weight 400
  1. Weights & Styles: If you only need specific font weights or styles, you can import them individually to reduce the payload size. Fontsource allows you to select weights and styles precisely. To import a specific weight or style, use the corresponding imports. For example:
import "@fontsource/open-sans/500.css"; // Weight 500.
import "@fontsource/open-sans/900-italic.css"; // Italic variant.
  1. CSS: Once the font is imported, you can reference it in your CSS stylesheets, CSS Modules, or CSS-in-JS. Use the font family name associated with the font package you installed. For example:
body {
 font-family: "Open Sans", sans-serif;
}

Appendix

Note created on 2024-04-25 and last modified on 2024-04-25.

LIST FROM [[Tool - FontSource]] AND -"CHANGELOG" AND -"04-RESOURCES/Tools/Tool - FontSource"

(c) No Clocks, LLC | 2024

Graph View

Backlinks