@webority/fonts-sans

Webority Sans: 9 weights (Thin to Black), each with an italic. Built from Inter 4.1 and licensed under the SIL Open Font License 1.1 (OFL.txt ships in this package).

npm install @webority/fonts-sans

Web

Import the stylesheet once, then use the family:

@import "@webority/fonts-sans/fonts.css";

body { font-family: "Webority Sans", system-ui, sans-serif; }

Or from a bundler entry: import '@webority/fonts-sans/fonts.css';. fonts.css declares each weight and style (font-display: swap) twice, with ranges that do not overlap: a Latin cut in fonts/latin/ (about 42 KB) for Latin text, and the full WOFF2 in fonts/ for the other characters the font has. A Latin-only page downloads only the small files, and characters the font lacks (Hindi, emoji) download nothing and fall back to the next family.

Preload the body face

With swap, the first paint uses the fallback font and the text reflows when Webority Sans arrives. Preload the one face your body text uses, the Regular Latin cut, so it downloads alongside the CSS:

<link rel="preload" href="https://cdn.jsdelivr.net/npm/@webority/fonts-sans@<version>/fonts/latin/WeboritySans-Regular.woff2"
      as="font" type="font/woff2" crossorigin>

• href must be the exact URL the page's fonts.css resolves for fonts/latin/WeboritySans-Regular.woff2. A bundler renames and hashes the file, so use the URL in its build output. Any other URL downloads the font twice.
• Keep crossorigin, even on the same origin: fonts load in CORS mode, and a preload without it is not reused.
• Preload one face only. Every extra preload competes with the page's own CSS and scripts.

Expo and React Native

Install the optional peer, npx expo install expo-font, then load the faces before first render:

import { useWeboritySans } from '@webority/fonts-sans/expo';

export default function App() {
  const [loaded, error] = useWeboritySans();
  if (!loaded && !error) return null;
  return <Root />;
}

React Native picks a face by its name, not by weight: use fontFamily: 'WeboritySans-SemiBold', 'WeboritySans-BoldItalic' and so on. weboritySansFonts (the name to file map) is exported too, for expo-font's config plugin or useFonts with a subset.

expo.js loads the OTF files; WOFF2 is for the web only.