Skip to main content
All CollectionsTroubleshooting
Why are special characters in fonts not loading, and instead defaulting to Times?
Why are special characters in fonts not loading, and instead defaulting to Times?
Updated over 10 months ago

Webfonts doesn't use the CSS2 Google API, which allows passing test strings, so our loading mechanism only loads the basic alphabets. As a result, special characters in fonts are not automatically added and will default to Times. They can be manually added however, when adding your custom font as a <font>.

For example, lets say you are adding the following Google Webfont to your Bubble app:

<link href="link href="[url=https://fonts.googleapis.com/css2?family=Inter:wght@400;700]https://fonts.googleapis.com/css2?family=Inter:wght@400;700[/url]" rel="stylesheet">

It is recommended that you add a second link with any special characters you'd like to include using the '&text=' parameter:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&text=%E2%86%90%E2%86%92%E2%86%96%E2%86%97%E2%86%98%E2%9C%93" rel="stylesheet">

We urge you to be careful with this, however, as it risks breaking the normal ranges if any characters specified in the text=query overlap with those in the default-loaded ranges.

In order to ensure all characters are present in the end, the easiest workaround is to add TWO link tags, with non-overlapping characters: e.g.

<!-- load Inter normal+bold, for latin and latin extended -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700" rel="stylesheet">
<!-- load Inter arrows ←→↑↓↖↗↘↙ -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&text=%E2%86%90%E2%86%92%E2%86%96%E2%86%97%E2%86%98%E2%9C%93" rel="stylesheet">

Did this answer your question?