atlas-fonts

A next/fonts-like library for loading Google Fonts in React/TypeScript projects. Provides an identical API structure to next/font/google.

Installation

npm install atlas-fonts

Usage

Basic Usage (like next/font/google)

import { Abel, Inter, Roboto } from 'atlas-fonts/google';

// Configure the font exactly like next/fonts
const abel = Abel({
  subsets: ['latin'],
  weight: ['400'],
  variable: '--font-abel',
  display: 'swap',
});

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-inter',
  display: 'swap',
});

// Use in your component
function App() {
  return (
    <div className={abel.className}>
      <h1>Hello World with Abel font!</h1>
    </div>
  );
}

With CSS Variables

import { Roboto, Playfair_Display } from 'atlas-fonts/google';

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-roboto',
});

const playfair = Playfair_Display({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-playfair',
});

function App() {
  return (
    <div className={`${roboto.variable} ${playfair.variable}`}>
      <h1 style={{ fontFamily: 'var(--font-playfair)' }}>Title</h1>
      <p style={{ fontFamily: 'var(--font-roboto)' }}>Body text</p>
    </div>
  );
}

Using the Style Object

import { Poppins } from 'atlas-fonts/google';

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '600'],
});

function App() {
  return (
    <div style={poppins.style}>
      <p>This text uses Poppins font!</p>
    </div>
  );
}

React Hook

import { useFont } from 'atlas-fonts/react';

function MyComponent() {
  const font = useFont('Roboto', {
    weight: ['400', '700'],
    subsets: ['latin'],
    variable: '--font-roboto',
  });

  return <div className={font.className}>Hello World</div>;
}

Multiple Fonts with Hook

import { useFonts } from 'atlas-fonts/react';

function MyComponent() {
  const fonts = useFonts({
    heading: { name: 'Playfair Display', weight: ['700'] },
    body: { name: 'Open Sans', weight: ['400', '600'] },
  });

  return (
    <>
      <h1 className={fonts.heading.className}>Title</h1>
      <p className={fonts.body.className}>Content</p>
    </>
  );
}

Custom Google Fonts

import { createGoogleFont } from 'atlas-fonts/google';

// Create a loader for any Google Font
const MyCustomFont = createGoogleFont('Custom Font Name', ['400', '700']);

const customFont = MyCustomFont({
  subsets: ['latin'],
  display: 'swap',
});

Dynamic Font Loading

For fonts not statically imported, you can use the dynamic loading API:

import { loadFont, getAllFontNames, searchFonts, getFontsByCategory } from 'atlas-fonts/google';

// Load any Google Font dynamically by name
const myFont = await loadFont('Roboto Slab', {
  weight: ['400', '700'],
  subsets: ['latin'],
});
 
const allFonts = getAllFontNames();
console.log(`Total fonts: ${allFonts.length}`); 

// Search fonts by name
const results = searchFonts('mono');
// Returns: ['Roboto Mono', 'Space Mono', 'JetBrains Mono', ...]

// Get fonts by category
const sansSerifFonts = getFontsByCategory('sans-serif');
const serifFonts = getFontsByCategory('serif');
const displayFonts = getFontsByCategory('display');
const handwritingFonts = getFontsByCategory('handwriting');
const monospaceFonts = getFontsByCategory('monospace');

Create Font Loader Factory

import { createFontLoader } from 'atlas-fonts/google';

// Create a reusable loader for a specific font
const loadRoboto = createFontLoader('Roboto', {
  weights: ['400', '500', '700'],
  styles: ['normal', 'italic'],
  defaultSubsets: ['latin', 'latin-ext'],
});

// Use the loader with options
const roboto = await loadRoboto({
  weight: '700',
  style: 'italic',
  variable: '--font-roboto',
});

SSR Support

import { generateFontLinks } from 'atlas-fonts/google';

// Generate link tags for SSR (e.g., in your document head)
const links = generateFontLinks('Inter', {
  weight: ['400', '700'],
  subsets: ['latin'],
});

// Returns HTML string:
// <link rel="preconnect" href="https://fonts.googleapis.com">
// <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
// <link href="https://fonts.googleapis.com/css2?family=Inter..." rel="stylesheet">

API

Font Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | subsets | string[] | ['latin'] | Font subsets to load | | weight | string \| string[] | ['400'] | Font weights to load | | style | string \| string[] | ['normal'] | Font styles (normal, italic) | | variable | string | - | CSS variable name (e.g., '--font-roboto') | | display | string | 'swap' | Font display strategy | | preload | boolean | true | Preload the font | | fallback | string[] | System fonts | Fallback font stack |

Font Result

| Property | Type | Description | |----------|------|-------------| | className | string | CSS class to apply to elements | | variable | string | CSS variable (if specified) | | style | object | Inline style object for React |

Dynamic API Functions

| Function | Description | |----------|-------------| | loadFont(name, options) | Load any Google Font by name | | getAllFontNames() | Get array of all font names | | searchFonts(query) | Search fonts by name | | getFontsByCategory(category) | Get fonts filtered by category | | getFontCount() | Get total number of available fonts | | createFontLoader(name, config) | Create reusable font loader factory |

Available Fonts

This library includes all Google Fonts (dynamically updated), organized by category. Run npm run generate to update to the latest fonts from the Google Fonts API.

Categories

• Sans Serif: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, and many more
• Serif: Playfair Display, Merriweather, Lora, PT Serif, and many more
• Display: Bebas Neue, Abril Fatface, Lobster, Pacifico, and many more
• Handwriting: Dancing Script, Pacifico, Great Vibes, and many more
• Monospace: Fira Code, JetBrains Mono, Source Code Pro, and many more

Popular Fonts (Pre-configured exports)

These fonts are available as direct named exports with default configurations:

Sans-serif: Abel, Inter, Roboto, Open_Sans, Lato, Montserrat, Poppins, Raleway, Oswald, Nunito, Nunito_Sans, Ubuntu, Source_Sans_3, Work_Sans, Quicksand, Rubik, Karla, DM_Sans, Space_Grotesk, Plus_Jakarta_Sans, Outfit, Manrope, Sora, Lexend

Serif: Playfair_Display, Merriweather, Lora, PT_Serif, Libre_Baskerville

Monospace: Fira_Code, JetBrains_Mono, Source_Code_Pro, Roboto_Mono

Display: Bebas_Neue, Abril_Fatface, Lobster, Pacifico, Dancing_Script

import { 
  Roboto_Slab,
  Noto_Sans_JP,
  Fira_Code,
  // ... and 1904 more
} from 'atlas-fonts/google';

Scripts

# Build the library
npm run build

# Regenerate all font definitions from Google Fonts API
npm run generate

# Full build (regenerate + build)
npm run build:full

License

MIT