My Website Displays
Incorrect Fonts
If your website only displays part of the text in the correct font and the rest in a different font, it is likely that the problem is that the latter was added manually during editing.
Why is it happening?
It's possible that while you were editing texts, you set the font to Open Sans, for example. Later, you decided to change it to PT Sans. While some blocks display the correct fonts, others appear in a default font such as Times. You need to remove the font that you added manually.
What should I do?
Select the block that displays the incorrect font, go to the editor, select all. Then select Font Family → Remove Font Family. Alternatively, you can click "Clear Formatting" in the right corner of the text editing toolbar. Republish the page.
It's possible that while you were editing texts, you set the font to Open Sans, for example. Later, you decided to change it to PT Sans. While some blocks display the correct fonts, others appear in a default font such as Times. You need to remove the font that you added manually.
What should I do?
Select the block that displays the incorrect font, go to the editor, select all. Then select Font Family → Remove Font Family. Alternatively, you can click "Clear Formatting" in the right corner of the text editing toolbar. Republish the page.
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
Fonts added using the CSS file
“
I'm trying to add my own font in the Site Settings. I've created a CSS file and saved it. Then I uploaded the custom font and set the font style in the Site Settings. However, a published page shows in a basic font such as Times.
Why is it happening?
You've incorrectly specified the font family.
Open your CSS file and check the font family. The typeface should match the name of the font you've set in the Site Settings. Here's an example:
You've incorrectly specified the font family.
Open your CSS file and check the font family. The typeface should match the name of the font you've set in the Site Settings. Here's an example:
What should I do?
You have to specify the font's name in the CSS file in exactly the same way you did in the Site Settings. In our example, we changed "Conv_GothaProBol" to "Gotham Pro."
You have to specify the font's name in the CSS file in exactly the same way you did in the Site Settings. In our example, we changed "Conv_GothaProBol" to "Gotham Pro."
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: *). Read more about adding custom fonts via external CSS files in our guide to connecting a custom CSS file.
Custom fonts issues
“
Basic fonts are displayed despite I have set up my custom fonts.
There may be several reasons for this error. First, check whether the font is registered in a font family. It's important that the official name is specified and it is exactly the same as the name of the font you have uploaded.
If the font file is not in the Web Open Font Format (WOFF), then you need to convert it. We recommend using WOFFer, especially if you're using Cyrillic fonts.
I'm having issues with some basic fonts
“
I used a standard font, exported my project but the wrong font is being displayed.
Some of the fonts used on Tilda come from the font libraries by Paratype and type.today that provide these fonts under a partnership agreement.
The following fonts are currently available:
For these fonts to display correctly on your exported website, add the domain you are exporting your website to in the Site Settings → Domain. There is no need to change the domain to Tilda on the registrar's page.
The following fonts are currently available:
- Graphik
- Circe (and Circe Rounded)
- Mediator (and Mediator Serif)
- Kazimir
- Futura
- Reforma Grotesk
For these fonts to display correctly on your exported website, add the domain you are exporting your website to in the Site Settings → Domain. There is no need to change the domain to Tilda on the registrar's page.
If you see flickering when opening your website in the browser—this is a system font being loaded followed by loading yours. This is not an error but perfectly normal.
It takes time for a file to load. Sometimes it happens instantly (especially if you have fast internet), and you see your custom font straight away; sometimes it takes more time.
To keep the page load from slowing down and a visitor from waiting, the most important thing—the content—is loaded first, followed by loading other elements. So you can see the system fonts before your 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.
It takes time for a file to load. Sometimes it happens instantly (especially if you have fast internet), and you see your custom font straight away; sometimes it takes more time.
To keep the page load from slowing down and a visitor from waiting, the most important thing—the content—is loaded first, followed by loading other elements. So you can see the system fonts before your 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.
