---
title: Angular
section: Frameworks
---

# 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.

```ts
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";
}
```

## 2. CSS Imports

Open `app.component.css` and import the desired font weights.

```css
@import "~@fontsource-variable/open-sans/wght.css";
```

## 3. Usage

You can now use the imported fonts in your Angular project.

```css
h1 {
  font-family: "Open Sans Variable", sans-serif;
}
```
