Set Project Fonts

1
Set font in Project Settings
1. Open Project Settings
2. Choose the Font tab, set fonts for headlines and text blocks
3. Choose the Styles tab, set the size, color and style of the font
4. Save the changes
2
Add font with Typekit
1. Get an account at typekit.com
2. Go to the Fonts section
3. Let's add the Futura font. Put the name of the font into the Search field
4. Go to the font page.
There, click on +Use Fonts
Go to the <> Web tab
Add the font to KIT. Choose Create New Kit – or add to the existing kit.
Complete the field as shown putting into the line domains: tilda.cc, tilda.ws, *.tilda.ws
Next step can be skipped
The kit has been created. You will be redirected to its page. Once there, click on Publish
Choose: All Characters and the Weights & Styles you need.
While there, also click on Using fonts in CSS. You need the first line: futura-pt. It is the name of the font family.
On the Kit page, click Embed Code – it's in the right upper corner. When a pop-up
window appears look at the last line at the very bottom for Type Kit ID.
Go back to Tilda > Project Settings > Font
There, fill in the fields Type Kit and Headline Font Family Name. Save the changes.
3
Add your own font via an external CSS file
It's very simple and not at all terrifying as it may seem. It will take about 15 minutes.
First, you will need WOFF files of your font
Those can be obtained if you, for instance, purchase a font at myfonts.com. When making the purchase, choose WEB license – to make sure it can be used on the internet.

Put the font files online
To do it, you can use uploadcare.com, which provides a free storage of up to 100MB.
1. Get an account at uploadcare.com
2. Start a new project
3. Go to Files
4. Upload your files
5. When the files are uploaded, copy their links by right-clicking on the name of the file on your list and choosing Copy Link Address

To put your files online, you can choose any server or CDN. It does not have to be Uploadcare. But it is important that the server provides Access-Control-Allow-Origin CORS for seeding to any domain. (Access-Control-Allow-Origin: *)
If you use your own server to host the files
Create a .htaccess file in the site root and add this code there:

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Create your CSS file and upload it to your server
CSS file example


@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;
}

And one more. 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. We need to open Tilda and add the names of your CSS file and font family.

Go to Project Settings > More and enter the URL of your CSS file.
Go to the Font tab and enter your font family name as you have it in the CSS file
ATTENTION: You will be able to view your customized font only after the project is published. While editing and previewing, external CSS files remain disconnected which will make your font unavailable during these stages (this is done out of security
concerns).
4
Using Google Fonts
Open fonts.google.com, choose the font and click on button with (+) plus sign - Select this font
Click on Family Selected at the bottom.
Choose the styles and languages you want on Customize tab.
Copy the link from Embed tab. It should looks like:
https://fonts.googleapis.com/css?family=Lora:400,700
Go to Tilda > Site settings > Fonts and Colours > Custom settings > Google Fonts and put the link into the field CSS link.

Put the name of the font.
Publish the project.
Font has been set.
Made on
Tilda