@typewe/inter
v1.0.0
Published
Self-hosted Inter variable font - optimized for performance and privacy
Maintainers
rcreboReadme
@typewe/inter
Self-hosted Inter variable font optimized for performance and privacy.
Features
- 🚀 Variable font - All weights (100-900) in a single file
- ⚡️ Fast - Self-hosted, no external CDN requests
- 🔒 Privacy-first - GDPR compliant, no tracking
- 📦 Lightweight - Optimized WOFF2 format
- 🎨 Complete family - Normal and Italic styles included
- 🖥️ UI-optimized - Designed specifically for user interfaces and screens
Installation
npm install @typewe/interOr with yarn:
yarn add @typewe/interOr with pnpm:
pnpm add @typewe/interUsage
Next.js (App Router)
// app/layout.tsx
import '@typewe/inter/css/index.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body style={{ fontFamily: 'Inter, sans-serif' }}>
{children}
</body>
</html>
);
}Next.js (Pages Router)
// pages/_app.tsx
import '@typewe/inter/css/index.css';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}React / Vite
// main.tsx or App.tsx
import '@typewe/inter/css/index.css';
function App() {
return (
<div style={{ fontFamily: 'Inter, sans-serif' }}>
<h1>Hello World</h1>
</div>
);
}Plain HTML + Build Tool
If you're using a bundler like Webpack or Vite:
// index.js
import '@typewe/inter/css/index.css';Tailwind CSS
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
};Then import the CSS in your entry file:
import '@typewe/inter/css/index.css';CSS
/* Import in your CSS file */
@import '@typewe/inter/css/index.css';
body {
font-family: 'Inter', sans-serif;
}
/* Use any weight from 100 to 900 */
.light {
font-weight: 300;
}
.regular {
font-weight: 400;
}
.medium {
font-weight: 500;
}
.bold {
font-weight: 700;
}
/* Italic styles */
.italic {
font-style: italic;
}Variable Font Benefits
This package uses modern variable fonts, which means:
- All weights in one file - Weights 100-900 available without loading multiple files
- Smoother animations - Animate between font weights smoothly
- Smaller file size - One variable font is smaller than multiple static fonts
- Better performance - Fewer HTTP requests, faster page loads
Available Weights
- Thin: 100
- Extra Light: 200
- Light: 300
- Regular: 400
- Medium: 500
- Semi Bold: 600
- Bold: 700
- Extra Bold: 800
- Black: 900
All weights support both normal and italic styles.
Browser Support
Variable fonts are supported in all modern browsers:
- Chrome 62+
- Firefox 62+
- Safari 11+
- Edge 79+
For older browsers, the font will fallback to system fonts.
Why Self-Host?
Performance
- ~200ms faster than Google Fonts CDN
- No DNS lookup or external connection needed
- Fonts served from same domain (better caching)
Privacy
- GDPR compliant - No data sent to Google
- No user tracking
- No external requests
Reliability
- Works offline
- No dependency on third-party CDN uptime
- Complete control over font delivery
License
This font is licensed under the SIL Open Font License (OFL-1.1).
Original font by Rasmus Andersson: Inter on GitHub
More Fonts
Visit TypeWeave for more self-hosted fonts.
Support
- 📚 Documentation: typeweave.com/documentation
- 🌐 CDN Alternative:
https://typeweave.com/api/fonts/inter/css - 📧 Contact: Visit our website for support
Changelog
1.0.0
- Initial release
- Inter variable font (normal + italic)
- All weights 100-900
- Optimized WOFF2 format