Using Geist Front in Angular

Using Geist Front in Angular

Tutorial on using Vercel’s new Geist font in your Angular project.

In October of 2023, Vercel announced a new font - Geist. They were kind enough to provide a compressed file with all of the otf, woff2, and variable font files in it licensed under OFL for non-React codebases.

Here’s how to use Geist in Angular:

  1. Download the zip file from their releases page.

  2. Decompress the zip file and move the font file in to your assets folder: src/assets/geist.woff2.

  3. Set the font face rule in your root CSS file:

     @font-face {
         font-family: geist;
         src: url(assets/geist.woff2) format("opentype");
     }
    
  4. Set the font family property in wherever:

     font-family: Geist;
    

Here is an example commit in my project.