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 click on Advanced 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 font 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 inserted. Save the changes. Now the font is connected and you 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 "Get font" button → "Get embed code" → select "Link" and select the styles you need.
Copy the font link, that is the part of the code inside the quotes.
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=swaphttps://fonts.googleapis.com/css2?family=Lora:wght@400..700
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 the "Get font" button for two different fonts → "Get embed code" → select "Link" and select the desired styles for the fonts.
Copy the CSS link with both fonts.
Paste the link in the CSS link field on the Google Fonts tab.
Paste the full, exact name of the 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 the 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 and another font is assigned for the page using the text editor toolbar. In this case, you need to reset the assigned style by clicking the "Clear formatting" button in the top toolbar.
Read more about other errors in the article:
Read more about other errors in the article:
