Help Center
How to Connect Fonts Using the CSS File
Connecting files via your own CSS requires experience in writing CSS code and your own server to store the file.
The first thing you need is WOFF font file(s).
You can get them by buying a font from a font service, e.g., myfonts.com. When buying, choose the "WEB" license so that you can use it online.
Place font files on the web
You may choose any server or CDN service for placing files. The main thing is that the server must support Access-Control-Allow-Origin CORS for distribution to any domain. (Access-Control-Allow-Origin: *)
You can get them by buying a font from a font service, e.g., myfonts.com. When buying, choose the "WEB" license so that you can use it online.
Place font files on the web
You may choose any server or CDN service for placing files. The main thing is that the server must support Access-Control-Allow-Origin CORS for distribution to any domain. (Access-Control-Allow-Origin: *)
If you host files on your own server
Create a .htaccess file in the root of the website and add the following code:
Create a .htaccess file in the root of the website and add the following code:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>Create your own CSS file and place it on your server or CDN service.
How to create a CSS file
Below is an example of how CSS is written. You can create it in an ordinary text editor, save it with a .css extension, and then upload it to a server or CDN.
@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;
}
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;
}
How to use CSS
Go back to Tilda. Site Settings → Fonts and Colors → Your Own Font. Paste the link to the CSS file. Add the name of the font as specified in the CSS file.
Save and republish all pages.
Important: you'll see your font only when you publish the website. In the Edit or Preview mode, no third-party CSS file can be connected, meaning that your font will not be visible (this is done for safety reasons).
