Angular

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

1. Installation

First, install the font package you want to use:

npm install @fontsource-variable/open-sans

2. Import in Main Entry File

For Angular 17+ projects, the recommended approach is to import fonts in your main entry file (main.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

You can also import fonts directly in individual components:

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

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

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

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

/* 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;
}

css

6. Global Styles

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

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

css