Skip to content

Fontsource

Fontsource packages font files so your website can serve them with its own build.

Visit Fontsource

What does it mean to host a font with your app?

Your app includes the font files and styles in its build, and serves them from your deployment. Your visitor’s browser can get them there without fetching the same font from a separate public font service. The font files still need to be included in what you deploy.

Which files should you ask your builder to include?

Choose the weights your pages actually use. Weight is how light or bold the letters look. A variable font can cover a range of weights in one face when the family supports it. Check italic separately. Fontsource’s default styles let the browser choose which character sets to download for the text on the page.

Keep a fallback typeface in your styles so words remain readable if the custom font is unavailable. Check names and words in the languages your app actually displays.

Which license should you keep with the font?

Check the license for the specific family. Fontsource’s own project uses MIT, while the fonts have their own terms. For example, the Basic family page identifies the SIL Open Font License. Keep the license text, selected family and package version with your handoff.

How would you plan a test for missing letters or a slow font?

Write a fictional page title and sample names in the scripts your app needs. Do this on paper and make no network change.

  1. Mark the necessary styles
    Identify the regular and bold text. Add italic only where the screen uses it.
  2. Describe the fallback
    Draw the same screen with the system font. Titles and controls should remain readable and fit their space.
  3. Write the live check for later
    Ask someone to verify the deployed file, check a missing-character case and confirm the page still reads when the font cannot load.