5

Gostaria de saber como funciona @font-face como devo aplica-lo no meu código CSS pois quero usar uma fonte que se chama Tekton Pro porém se somente utilizar a tag font-family:Tekton Pro não funciona e gostaria que ela pega-se nos navegadores: Google chrome,Mozila e Safari.

Obs afinal de contas oque devo fazer e baixar um arquivo com as fontes e colocar na pasta do projeto e setar no meu código ou apenas colocar a url das fontes direto no meu código( se sim qual seria o site ).

5
  • 1
    você pode encontrar a resposta dessa pergunta aqui pt.stackoverflow.com/questions/11072/… Commented 20/05/2015 às 13:37
  • então @ErlonCharles eu li la porem nao entendi uma coisa essa font face e uma url que coloco direto no meu codigo css ou e um arquivo que baixo coloco na minha pasta do projeto e seto ele no codigo Commented 20/05/2015 às 13:42
  • 1
    Você importa um arquivo defonte externa para o seu css, nomeia essa fonte importada e usa essa nova fonte externa como se fosse as fontes nativas. Commented 20/05/2015 às 14:12
  • so que ai eu nao usaria mais @font-face e sim import ???? poderia fazer uma simulação com essa fonte teken pro Commented 20/05/2015 às 14:13
  • @font-face { font-family: "Nome-da-Fonte"; src: url("caminho da fonte"); /* para IE */ src: local("nome-da-fonte"), url("caminho da fonte") format("opentype"); } Commented 20/05/2015 às 14:24

2 Respostas 2

2

Você pode fazer de dois jeitos:

1 - Possuir a fonte localmente

Fazer o download da fonte, salvar no seu projeto e referenciar no CSS:

@font-face {
  font-family: "Open Sans";
  src: url("OpenSans.woff");
}

E utilizar o nome que está em font-family no resto do arquivo CSS.

Lembrando que existem fontes gratuitas e pagas. Um bom site é o Font Squirrel.

2 - Utilizar o Google Fonts

Exemplo da Open Sans

Você escolhe os estilos que você quer e ele te gera um link. Neste link, tem os @font-face definidos conforme você escolheu antes. A partir daí, basta colocar este link no head e usar a fonte normalmente.

Exemplo:

body {
  font-family: "Open Sans";
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>Texto na fonte Open Sans</h1>

Sobre compatibilidade

Existem vários formatos de fonte: WOFF, WOFF2, TTF, SVG, EOT, OTF, e nem todos os navegadores suportam todos estes tipos. A melhor maneira de garantir compatibilidade com todos os navegadores, é possuir a fonte em todos estes formatos (você pode colocar vários url() no @font-face, um para cada arquivo).

Se você não liga pra IE8-, utilize WOFF, que possui compatibilidade com IE9+ e os principais navegadores, inclusive móveis.

Acredito que a melhor maneira ainda é deixar a responsabilidade com o Google Fonts, pois além de usar cache, normalmente ele garante a compatibilidade.

1

Deve ser problema com path.

Fiz um exemplo usando "font online":

JSFiddle

Veja se rola ai no seu código.

1
  • funcionou mais e normal isso ser deste tamnho e coreto utilizar dessa forma Commented 20/05/2015 às 14:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .