Como conectar fontes usando o arquivo CSS
A conexão de arquivos por meio de seu próprio CSS requer experiência em escrever código CSS e seu próprio servidor para armazenar o arquivo.
A primeira coisa de que você precisa é o(s) arquivo(s) de fonte WOFF.
Você pode obtê-los comprando uma fonte em um serviço de fontes, por exemplo, myfonts.com. Ao comprar, escolha a licença "WEB" para poder usá-la on-line.
Coloque os arquivos de fonte na Web
Você pode escolher qualquer servidor ou serviço CDN para colocar os arquivos. O principal é que o servidor deve oferecer suporte ao Access-Control-Allow-Origin CORS para distribuição em qualquer domínio. (Access-Control-Allow-Origin: *)
Você pode obtê-los comprando uma fonte em um serviço de fontes, por exemplo, myfonts.com. Ao comprar, escolha a licença "WEB" para poder usá-la on-line.
Coloque os arquivos de fonte na Web
Você pode escolher qualquer servidor ou serviço CDN para colocar os arquivos. O principal é que o servidor deve oferecer suporte ao Access-Control-Allow-Origin CORS para distribuição em qualquer domínio. (Access-Control-Allow-Origin: *)
Se você hospedar arquivos em seu próprio servidor
Crie um arquivo .htaccess na raiz do site e adicione o seguinte código:
Crie um arquivo .htaccess na raiz do site e adicione o seguinte código:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>Crie seu próprio arquivo CSS e coloque-o em seu servidor ou serviço de CDN.
Como criar um arquivo CSS
Abaixo está um exemplo de como o CSS é escrito. Você pode criá-lo em um editor de texto comum, salvá-lo com uma extensão .css e, em seguida, carregá-lo em um servidor ou 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;
}
Como usar 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
Volte para Tilda. Site Settings → Fonts and Colors → Your Own Font. Cole o link para o arquivo CSS. Adicione o nome da fonte conforme especificado no arquivo CSS.
Salvar e republicar todas as páginas.
Importante: você verá sua fonte somente quando publicar o site. No modo Editar ou Visualizar, nenhum arquivo CSS de terceiros pode ser conectado, o que significa que sua fonte não estará visível (isso é feito por motivos de segurança).
