React - Inter Font Configuration

Sources:

• **

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

Configuring fonts for a React application can be done in many ways.

• Manually Download and Import Font Files
• Use a Content Delivery Network (CDN)
• Use a published Node Package Manager (NPM) package

Code Snippet

Assumes usage of the FontSource library:

pnpm add @fontsource-variable/inter

Add import to project’s entry-point/root layout:

// src/index.tsx
import '@fontsource-variable/inter'; // Supports weights 100-900

Include CSS:

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

Details

About

This note is about …

See Also

• JavaScript Map of Content
• JavaScript Code
• Hyper Text Markup Language (HTML)
• Cascading Style Sheets (CSS)
• React.js
• Next.js

---

Appendix

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

Backlinks

LIST FROM [[React - Inter Font Configuration]] AND -"CHANGELOG" AND -"04-RESOURCES/Code/React/React - Inter Font Configuration"

---

(c) No Clocks, LLC | 2024