@flight-framework/fonts
v0.0.2
Published
Agnostic font optimization with multiple adapter support
Maintainers
eliosltReadme
@flight-framework/fonts
Font loading and optimization package.
Installation
npm install @flight-framework/fontsQuick Start
import { createFontLoader } from '@flight-framework/fonts';
import { googleFonts } from '@flight-framework/fonts/google';
const fonts = createFontLoader({
adapter: googleFonts(),
});
const inter = await fonts.load('Inter', {
weight: ['400', '600', '700'],
subsets: ['latin'],
display: 'swap',
});
// Use in HTML
document.documentElement.className = inter.className;Adapters
Google Fonts
import { googleFonts } from '@flight-framework/fonts/google';
fonts.load('Roboto', {
weight: ['400', '700'],
subsets: ['latin', 'cyrillic'],
});Local Fonts
import { localFonts } from '@flight-framework/fonts/local';
const myFont = await fonts.loadLocal('MyFont', {
src: [
{ path: '/fonts/MyFont-Regular.woff2', weight: '400' },
{ path: '/fonts/MyFont-Bold.woff2', weight: '700' },
],
display: 'swap',
});React Components
import { FontHead } from '@flight-framework/fonts/react';
function Layout({ children }) {
return (
<html className={inter.className}>
<head>
<FontHead fonts={[inter]} />
</head>
<body>{children}</body>
</html>
);
}Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| weight | string \| string[] | '400' | Font weights |
| subsets | string[] | ['latin'] | Character subsets |
| display | string | 'swap' | font-display value |
| preload | boolean | true | Preload font files |
| fallback | string[] | ['system-ui'] | Fallback fonts |
License
MIT