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
The numbers 300,400... in the font-weight property indicate the weight of the font. Here is the complete list:
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@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 only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@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 only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
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).
