How To Connect Google Fonts To Tilda Websites
Google Fonts is a large library of free fonts that can be used in any project, including commercial ones. This article describes how to add fonts from this library for use on your website.
Connecting fonts from Google Fonts by searching inside the Tilda font library
To connect a font from Google Fonts, go to Site Settings → Fonts and Colors and click on Custom Settings button.
Click the Google Fonts tab and then click the "Search in Fonts" button to access the font library from Google Fonts.
There will be a panel in which you can search for a font by name or select the desired font style - Serif, Sans Serif, Handwritten, Monospaced, or Display font (special font for large headings or text elements).
After selecting the font you want, you can choose the fonts weights you want.
Then click the "Select Font" button and optionally check the box if you want to use that font for both headings and text.
Then click the "Select Font" button and optionally check the box if you want to use that font for both headings and text.
After selecting the link field for Google Fonts, the right link for its connection will be automatically substituted. Save the changes. Now the font is connected and now can control its parameters when editing pages.
Connecting fonts by inserting a link from Google Fonts
Open fonts.google.com and select the font you would like to use.
Click the "+Select this style" button and select the styles you need.
Copy the font link, that is the part of the code inside the quotes, in the <link> tab.
The link should look like this:
The link should look like this:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
Go to Tilda → Site Settings → Fonts and Colors → Custom settings → Google Fonts, and paste the link into the "CSS Link" field.
Important: Use the exact name of the font as it is called in Google Fonts for the "Heading Font Family Name" and "Body Text Font Family Name" fields.
Publish all pages of the website.
The font is connected.
How to add two different Google Fonts
Click +Select this style and select the desired fonts for the two different fonts. The Selected Families box with the selected fonts appears on the right side of the screen.
Copy the CSS link with both fonts from the <link> tab.
Paste the link in the CSS link field on the Google Fonts tab.
Paste the full, exact name of first font to the Headline Font Family Name field, and paste the full, exact name of another font to the Text Font Family Name field.
Paste the full, exact name of first font to the Headline Font Family Name field, and paste the full, exact name of another font to the Text Font Family Name field.
Font connection issues
The most common reason for a font not displaying is that one font is connected in the site settings, but another font is assigned to the page, via the top edit panel. In this case, you need to reset the assigned style by clicking the "clear style" button in the top bar.
Read more about other errors in the article:
Read more about other errors in the article:
