angular-fonts

Optimized font loading for Angular with SSR support. Experience real-time font switching with Google Fonts.

Current Selection
Inter ยท 400

Live Preview

Heading Preview
The Quick Brown Fox Jumps Over the Lazy Dog
Paragraph Preview
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.
All Weights Comparison
Weight 300
The Quick Brown Fox
Weight 400
The Quick Brown Fox
Weight 500
The Quick Brown Fox
Weight 600
The Quick Brown Fox
Weight 700
The Quick Brown Fox
Weight 800
The Quick Brown Fox
Weight 900
The Quick Brown Fox

Font Details

Family
Inter
Weight
400
Display
swap
// Google Font
import { Inter } from 'angular-fonts/google';

export const inter = Inter({
  weights: [300, 400, 500, 600, 700, 800, 900],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
  preload: true,
});