How To Add Include External Font In Angular

To include an external font in an Angular project, you can follow these steps:

1. Find and download the desired font file (e.g., a .ttf or .woff file) or use a CDN link to the font.

2. Create a new folder called “fonts” inside the “src” folder of your Angular project (if it doesn’t already exist).

3. Move the downloaded font file into the “fonts” folder.

4. Open the “angular.json” file in the root directory of your Angular project.

5. Locate the `”architect” -> “build” -> “options” -> “styles”` section.

6. Add the path to the font file(s) within the “styles” array. For example:

"styles": [
"src/styles.css",
"src/fonts/your-font-file.ttf"
]

Make sure to adjust the path according to your font file’s location.

7. Save the changes to the “angular.json” file.

8. Open the “styles.css” file located in the “src” folder.

9. In the “styles.css” file, define a CSS `@font-face` rule to reference the font file. For example:

@font-face {
font-family: 'YourFontName';
src: url('./fonts/your-font-file.ttf') format('truetype');
}

Make sure to adjust the font file path and the font family name accordingly.

10. Use the defined font in your Angular components by applying the `font-family` property to the desired elements. For example:

h1 {
font-family: 'YourFontName', sans-serif;
}

Replace `’YourFontName’` with the actual font family name you defined in the `@font-face` rule.

11. Save the changes and start or rebuild your Angular project. The external font should now be included and applied to the specified elements.

Remember to double-check the paths and ensure that the font file is accessible relative to the root of your Angular project.