How TypeFont’s works

The catalogue lists every family published on Google Fonts. Use instant search for a name, combine filters (Arabic, Latin, Variable, Serif, Sans Serif, Display, Handwriting, Monospace, Popular, Trending, Recently Added) and sort alphabetically, by popularity, newest, most styles or variable fonts first. Cards load their real typeface only when they scroll into view.

Open Preview on any card for an editable canvas. Type Arabic, Latin, numbers or symbols and adjust size, weight, line height, letter spacing and theme. Reset restores defaults; Copy CSS and Copy font-family put ready-to-paste rules on your clipboard.

Download a single family from the preview dialog, or collect several in سلة خطوط (the font basket) and download the selected families together. The basket persists in your browser’s local storage.

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400&display=swap');

body {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 300;
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@1,700&display=swap"
/>

Place the downloaded files in your project and declare them:

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

TypeFont’s serves a locally cached copy from /fonts/ when one exists and falls back to the Google Fonts CDN otherwise.

@font-face {
  font-family: "Inter var";
  src: url("/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

.headline {
  font-family: "Inter var", sans-serif;
  font-variation-settings: "wght" 620, "slnt" -4;
}

One variable file replaces many static weights — smaller payloads and smooth interpolation between styles.

• Ship only the weights and subsets you actually render.
• Always set font-display: swap to avoid invisible text.
• Preload the single font file used above the fold.
• Prefer woff2, and prefer one variable file over four static weights.
• Self-host critical fonts to remove a third-party connection.

Nearly all Google Fonts families are released under the SIL Open Font License, with a few under Apache 2.0 or Ubuntu Font Licence. They are free for personal and commercial use, including embedding and self-hosting. You may not sell the font files on their own, and derivative fonts released under the OFL must stay under the OFL. Always check the license file bundled with each download.