Search
Enter at least two characters without personal information.

    LibraryArticles & FAQ Your projectRequest a quote
    LanguageEN
    Practical guides

    Choose and test web fonts across languages

    Typography needs to remain readable when a font arrives late, translations grow longer and characters are missing. A visual selection alone does not validate its integration.

    Go to the method

    Printed type specimens and tablet
    AI-generated illustration

    Estimated reading time : 3 min · Published

    Prepare characters actually used

    Collect samples in every language with accents, numbers, punctuation and long words. Include forms and errors rather than only a short heading. Check writing direction and language-specific characters within the site’s scope.

    Choose necessary weights and styles before multiplying files. Reduce variants according to content and hierarchy rather than removing useful distinctions. Check licence conditions and permitted hosting with the selected source.

    Choose a loading strategy

    font-display governs how a font is displayed according to its availability. MDN describes block, swap, fallback and optional. Choose according to reading needs and context, then observe actual browser behaviour.

    Define a fallback suitable for the intended reading experience. Test without the custom font. A preload helps only when the file is necessary and matches the requested resource; excessive preloading may compete with essential content.

    Test layout, zoom and states

    Check a dense page, navigation, table and form with final and fallback fonts. Test narrow screens and zoom. Buttons, prices, names and errors should remain available when text takes more space.

    Compare states before and after loading, including line breaks, height and primary-button movement. Capture specified conditions rather than judging an already-loaded desktop screen. Repeat languages that differ most from the initial design.

    Maintain the typography decision

    Keep origin, checked rights, files, tested languages and loading rules in the project documentation. Repeat representative examples before a brand or font change affects every screen.

    Remove unused variants only after checking content and documents that may still request them. Deliver readable typography with tested fallbacks, suitable character coverage and a limited list of justified resources.

    Primary documentation : MDN — font-display.

    Check reading without a remote font

    Serif and sans-serif letter specimens beside a loupe
    AI-generated illustration · Test readability when the intended font is unavailable.

    Proposed case: a translated heading works with its intended font but a button clips with the fallback. The loaded state hides the issue.

    Block the font file locally and check characters, lines and actions. Keep tested languages and widths; claimed coverage must be checked against published text.

    • Test the fallback font
    • Check language characters
    • Check narrow-screen actions

    Reference documents

    Content updated on

    Acceptance matrix to adapt to your project

    These proposed checks use synthetic cases. Decide the required behaviour with the team, record the result and assign unresolved gaps before release.

    Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

    Test cases, expected outcomes and useful evidence
    CaseExpected outcomeEvidence to retain
    Unavailable main fontText, prices and actions remain readable before or without font loading.Screenshots and completed journeys with font downloading deliberately blocked.
    Published scripts and accentsEvery sample renders the characters intended by the editorial team.Samples reviewed in the languages and writing systems actually used on the site.
    Zoom and narrow widthUseful labels and messages remain neither clipped nor covered.Recorded conditions and components containing the longest realistic text.
    Changed weight or familyRequested variants match useful files with checked usage permission.File inventory, observed requests and recorded rights for the selected font source.

    Frequently asked questions

    Does a font supporting French cover every language?

    No. Check characters, scripts and weights for the languages actually published. Test real samples rather than assuming full coverage from a single heading.

    Should all fonts always be preloaded?

    No. Identify files required for initial rendering and test the benefit. Unused resources and secondary variants do not automatically need preloading.

    Related topics