Why Does a Website Display Incorrect Fonts?
If your website displays incorrect fonts, the problem likely that a different font was manually assigned while modifying the block in the Editor.
In this case the block settings can be reset and the default font is displayed.
Learn more about the problem
For example, in the Site Settings, "Fonts and Colors" tab, you have specified the Roboto font initially. Then you highlighted the text in the block and in the context menu that appears you have manually specified this font.
Then in the Site Settings, you changed the font to Open Sans. In the blocks where the font was not specified manually, the text is displayed in Open Sans. However, in the blocks where the fontit was specified manually, the problem occurs. This is because the previous font (Roboto) is not connected to the website anymore.
Important: Manual settings specified in the context menu while editing the block may conflict with other typography settings.
How to fix the problem
In the page Editor, find the required block → click any place in the text → the font will automatically change to the font you have added in the Site Settings.
You can reset the font settings manually as well — to do this, select the Remove Font Family option in the drop-down menu or click "Clear Formatting" in the text editing toolbar.
Troubleshooting fonts depending on how you added your fonts
Fonts installed from a CSS file (either your own or from Google Fonts) are not displayed
Possible issues when adding a custom font using font files
Possible issues with basic fonts
The system fonts load first when opening the website
Fonts added using the CSS file
Check if you have specified the correct font name in the Site Settings.
The font name (font-family) must match the data from the CSS file: Site Settings → Fonts and Colors → Custom settings →Your Own Font tab → Upload font files.
The font name (font-family) must match the data from the CSS file: Site Settings → Fonts and Colors → Custom settings →Your Own Font tab → Upload font files.
Important: When adding a font using a CSS file, make sure that the server from which the font is being connected to your project, supports Access-Control-Allow-Origin CORS for seeding to any domain. (Access-Control-Allow-Origin: *). Learn more about adding custom fonts via external CSS files in our guide to connecting a custom CSS file.
Fonts added from the Google Fonts library
When adding the font, it is also important that the font name in the Site Settings matches the font name in Google Fonts.
Besides, be sure to check the link to Google Fonts CSS file, it should look like this:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swapCustom fonts uploaded as files
Check if you have specified the full official name of the font below the uploaded WOFF files. The same name should be specified for headings and/or text in the Site Settings → Fonts and Colors.
If the font displays correctly in Latin, but there are problems in Cyrillic or Greek, then you should check if the font supports Cyrillic or Greek characters. You can check this information with the service where you bought the font.
Also, some font converters may damage the Cyrillic or Greek version during conversion. This can be checked in the FontDrop! service. To convert font files, we recommend using WOFFer.
Also, some font converters may damage the Cyrillic or Greek version during conversion. This can be checked in the FontDrop! service. To convert font files, we recommend using WOFFer.
Fonts added from the font library
For exported projects, you can have a problem with basic fonts.
Some of the fonts on Tilda come from the font libraries by type.today service that provide these fonts under a partnership agreement:
For these fonts and other built-in fonts to display correctly on your exported website, you need to add the domain you are exporting your website to in the Site Settings → Domain. It is enough to specify the name of the domain, you do not need to connect it.
Some of the fonts on Tilda come from the font libraries by type.today service that provide these fonts under a partnership agreement:
- Graphik
- Kazimir
For these fonts and other built-in fonts to display correctly on your exported website, you need to add the domain you are exporting your website to in the Site Settings → Domain. It is enough to specify the name of the domain, you do not need to connect it.
Fonts load very slowly
It takes time for a font file to load. The load speed can depend on the amount of content on the website page and the quality of the internet connection used.
To keep the page load speed high and prevent visitors from being annoyed while waiting, the most important thing—the content—is loaded first, followed by loading other elements. So you can see the system fonts before any custom font is loaded.
You may add a Т228 block from the "Other" category to the page. It will slow down page load speed, and the browser will display text with custom fonts.
To keep the page load speed high and prevent visitors from being annoyed while waiting, the most important thing—the content—is loaded first, followed by loading other elements. So you can see the system fonts before any custom font is loaded.
You may add a Т228 block from the "Other" category to the page. It will slow down page load speed, and the browser will display text with custom fonts.
If your browser flickers while opening a web page, it is loading a system font and then your custom font. This is not an error, it is completely normal.
