Documentation

Angular

To integrate Fontsource into your Angular project, follow the steps below.

1. Entry File

Open app.component.ts and modify the @Component decorator accordingly.
⬤⬤
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
// File with Fontsource imports
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = "my-app";
}
ts

2. CSS Imports

Open app.component.css and import the desired font weights.
⬤⬤
@import "~@fontsource-variable/open-sans/wght.css";
css

3. Usage

You can now use the imported fonts in your Angular project.
⬤⬤
h1 {
font-family: "Open Sans Variable", sans-serif;
}
css