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