How to Set Project Fonts

There are four ways to set project fonts: specify project fonts in the Site Settings, add fonts from the Adobe Fonts library, upload fonts using an external CSS file, or add fonts from the Google Fonts library.
1
How to set project fonts in the Site Settings
1. Go to the Site Settings.
2. Go to Fonts and Colors, click on Custom settings, and specify heading text fonts and body text fonts.
3. Specify the fonts' size, weight, and colors.
4. Click on Save changes.
2
How to add fonts from the Adobe Fonts library
Sign up for Adobe Fonts and search for the fonts that you would like to your project.
Select specific fonts or click on "All Fonts Active" to select all fonts from the font family, then click on Add to Web Project.
Enter a new project name and click on Create.
In the next window, click on Done.
Go to My Adobe Fonts → Web Projects. Copy the Project ID and font-family name.
On Tilda, got to the Site Settings → Fonts and Colors → Adobe Fonts.
Fill in the "Adobe Fonts Kit ID," "Heading Font Family Name," and "Body Text Font Family Name" fields. Click on Save changes.
Publish all pages.
3
How to add a custom font using an external CSS file
It's very simple and not so difficult as it may seem. It takes about 15 minutes.
First, you need the WOFF files of the font
You can obtain those if you, for instance, purchase the font at myfonts.com. When making the purchase, select "Webfont" to make sure you can use it on the Internet.

Make the font files available online
To do it, you may use uploadcare.com, which provides a free storage of up to 100MB.
1. Sign up for uploadcare.com.
2. Start a new project.
3. Go to Files.
4. Upload the font files.
5. When the files are uploaded, copy the links by clicking on Copy URL next to the files' names.

To make the font files available online, you may choose any server or CDN. It does not have to be uploadcare.com. But it is important that the server provides Access-Control-Allow-Origin CORS for seeding to any domain (Access-Control-Allow-Origin: *).
If you choose to use your own server to host the files:
Create a .htaccess file in the website root and add this code in there:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Create a CSS file and upload it to your server.
The example of a CSS file:
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
Figures 300, 400… in the property font-weight set how thick or thin the characters will appear. Here's the full list:
300—light
400—normal
500—medium
600—semibold
700—bold

Internet browsers and, say, Photoshop, render fonts differently. Characters may look a bit thicker when online. Here's a small trick: you can use the Light font file for the text you want to appear as Normal.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
If you are missing a Semi-Bold (600) file, you can use the Bold file instead. In this case, semi-bold headlines will not appear as Normal but as Bold.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you have just one font file, you can assign it to every font weight by simply listing them and separating by a comma: 300, 400, 500, 600, 700.

Ok, we are almost done. Now we have to go to Tilda and add the names of the CSS file and the font family.

Go to the Site Settings → Fonts and Colors → Your Own Font. Enter the URL of your CSS file.
Go to Basic Fonts and enter the font family name as you have it in the CSS file.
ATTENTION: You will be able to view custom fonts only after your project is published. While editing and previewing, external CSS files remain disconnected, making custom fonts unavailable during these stages, which is done out of security concerns.
4
How to add fonts from the Google Fonts library
Go to Google Fonts and select the font you would like to add to your project.
Click on Select this style to collect the font styles.
Copy the link (the quoted part) from the <link> tab. It should look like this:

https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
On Tilda, go to the Site Settings → Fonts and Colors → Custom settings → Google Fonts. Paste the link in the "CSS link" field.

Fill in the "Heading Font Family Name" and "Body Text Font Family Name" fields.
Publish all pages.
The font has been set.
Made on
Tilda