# Angular [#angular]

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

## 1. Installation [#1-installation]

First, install the font package you want to use:

```sh
npm install @fontsource-variable/open-sans
yarn add @fontsource-variable/open-sans
pnpm add @fontsource-variable/open-sans
bun add @fontsource-variable/open-sans
```

## 2. Import in Main Entry File [#2-import-in-main-entry-file]

For Angular 17+ projects, the recommended approach is to import fonts in your main entry file (`main.ts`):

```ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import '@fontsource-variable/open-sans/wght.css';

bootstrapApplication(AppComponent, {
  providers: [
    // ...
  ]
}).catch(err => console.error(err));
```

## 3. Alternative: Component-Level Import [#3-alternative-component-level-import]

You can also import fonts directly in individual components:

```ts
import { Component } from '@angular/core';

import '@fontsource-variable/open-sans/wght.css';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Welcome to {{ title }}!</h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}
```

## 4. Legacy Installation [#4-legacy-installation]

If you’re using the traditional module-based Angular architecture (pre-Angular 17), you can import fonts in your `AppModule`:

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import '@fontsource-variable/open-sans/wght.css';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

## 5. CSS Usage [#5-css-usage]

Once imported, you can use the font in your component stylesheets:

```css
/* app.component.css */
h1 {
  font-family: "Open Sans Variable", sans-serif;
  font-weight: 600;
}

.content {
  font-family: "Open Sans Variable", sans-serif;
  font-weight: 400;
}
```

## 6. Global Styles [#6-global-styles]

For application-wide font usage, add the font family to your global styles (`styles.css`):

```css
/* styles.css */
body {
  font-family: "Open Sans Variable", sans-serif;
  margin: 0;
  padding: 0;
}
```