TILDA HELP CENTER

Set Project Fonts

There are four ways to set fonts: define the font in the Project Settings, add the font with Typekit , use an external CSS file or add the font with Google 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 google.com/fonts, choose the font and click on Add to collection
Click on Use at the bottom right corner.
Choose the styles you want.
Choose the character sets you want.
Copy the link. It should looks like:
http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'
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