Como conectar fontes usando o arquivo CSS
Conectar 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 que você precisa é de arquivo de fonte WOFF.
Você pode obtê-los comprando uma fonte de um serviço de fontes, por exemplo, myfonts.com. Ao comprar, escolha a licença "WEB" para que você possa usá-la on-line.
Inserir arquivos de fonte na Web
Você pode escolher qualquer servidor ou serviço CDN para colocar arquivos. O principal é que o servidor deve suportar Access-Control-Allow-Origin CORS para distribuição a qualquer domínio. (Access-Control-Allow-Origin: *)
Você pode obtê-los comprando uma fonte de um serviço de fontes, por exemplo, myfonts.com. Ao comprar, escolha a licença "WEB" para que você possa usá-la on-line.
Inserir arquivos de fonte na Web
Você pode escolher qualquer servidor ou serviço CDN para colocar arquivos. O principal é que o servidor deve suportar Access-Control-Allow-Origin CORS para distribuição a 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:
Conjunto de cabeçalhos Access-Control-Allow-Origin "*" Crie seu próprio arquivo CSS e coloque-o em seu servidor ou serviço 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 enviá-lo para um servidor ou CDN.
@font-face {
família de fontes: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
fonte-peso: 400;
estilo de fonte: normal;
}
@font-face {
família de fontes: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
peso da fonte: 700;
estilo de fonte: negrito;
}
família de fontes: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
fonte-peso: 400;
estilo de fonte: normal;
}
@font-face {
família de fontes: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
peso da fonte: 700;
estilo de fonte: negrito;
}
Como usar CSS
Os números 300.400... na propriedade font-weight indique o peso da fonte. Aqui está a lista completa:
100 - fino
200 - luz extra
300 - luz
400 - normal
500 - médio
600 - seminegrito
700 - negrito
800 - negrito extra
900 - preto
Os navegadores na Web exibem fontes um pouco diferentes do que podem parecer, digamos, no Photoshop. Eles geralmente saem um pouco mais ousados. Às vezes, é útil conhecer os pequenos truques: você pode especificar, por exemplo, um arquivo leve para obter uma renderização de fonte Normal.
@font-face {
família de fontes: «Museo Sans»;
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
peso-fonte: 300;
estilo de fonte: normal;
}
E vice-versa. Se você não tiver um arquivo semi-negrito (600), especifique Negrito em vez disso. Dessa forma, os títulos semi-negrito serão exibidos em negrito em vez do estilo de corpo de texto normal.
@font-face {
família de fontes: «Museo Sans»;
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
fonte-peso: 500;
estilo de fonte: negrito;
}
Se você tiver apenas um arquivo de fonte, poderá especificá-lo para todos os estilos, listando-os separados por vírgulas: 300.400.500.600.700
100 - fino
200 - luz extra
300 - luz
400 - normal
500 - médio
600 - seminegrito
700 - negrito
800 - negrito extra
900 - preto
Os navegadores na Web exibem fontes um pouco diferentes do que podem parecer, digamos, no Photoshop. Eles geralmente saem um pouco mais ousados. Às vezes, é útil conhecer os pequenos truques: você pode especificar, por exemplo, um arquivo leve para obter uma renderização de fonte Normal.
@font-face {
família de fontes: «Museo Sans»;
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
peso-fonte: 300;
estilo de fonte: normal;
}
E vice-versa. Se você não tiver um arquivo semi-negrito (600), especifique Negrito em vez disso. Dessa forma, os títulos semi-negrito serão exibidos em negrito em vez do estilo de corpo de texto normal.
@font-face {
família de fontes: «Museo Sans»;
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
fonte-peso: 500;
estilo de fonte: negrito;
}
Se você tiver apenas um arquivo de fonte, poderá especificá-lo para todos os estilos, listando-os separados por vírgulas: 300.400.500.600.700
Volte para Tilda. As configurações do site → fontes e cores → sua própria fonte. Cole o link para o arquivo CSS. Adicione o nome da fonte conforme especificado no arquivo CSS.
Salve e republique todas as páginas.
Importante: você verá sua fonte apenas 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 ficará visível (isso é feito por motivos de segurança).
