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