Como usar @font-face?

Sempre defendemos aqui no Escola Sites a importância de um bom layout no sucesso de um blog ou mesmo de um site, sempre que podemos divulgar métodos para se deixar os layouts mais bonitos, hoje mostraremos uma opção simplesmente fantástica para se deixar um blog mais atraente, diferenciado e único, usar @font-face nos seus layouts para melhorar a tipografia do blog. Leia o artigo e aprenda como utilizar este fantástico recurso.

Uso do @font-face

O que é @font-face?

@font-face é um atributo CSS 3 que permite incluir fontes que não são aquelas tradicionais (arial, verdana, sans-serif) aos elementos do layout do site ou blog. Com este elemento você pode incluir qualquer fonte sem que elas precisem estar disponíveis no dispositivo (computador, tablet, etc) de quem está acessando seu site. Para isso é necessário indicar algumas instruções no CSS para que o computador do leitor faça o download da fonte e a use normalmente.

Utilizando @font-face você possui a garantia de que independentemente do dispositivo que acessar o seu blog ou site, ele exibirá a fonte corretamente, mesmo que ele não a possua por padrão. Agora que você já sabe o que é @font-face, vamos aprender a usar?

Como usar @font-face?

Para utilizar o @font-face é necessário tem o mínimo de conhecimento de CSS, para que você possa incluir as informações necessárias ao arquivo CSS que será carregado em seu template/layout.

A estrutura básica para o uso do @font-face é:

@font-face {
     font-family: 'Helvetica Neue';
     src: url('HelveticaNeue.ttf');
}

Nesta declaração CSS, estou indicando ao navegador que utilizarei uma fonte chamada Helvetica Neue e indico onde o mesmo pode encontrar a fonte (atributo URL). Com isso poderei posteriormente em todo o meu CSS fazer chamadas do tipo:

p {
    font:24px 'Helvetica Neue', Arial, Tahoma, Sans-serif;
}

Muito provavelmente o sistema do usuário que está acessando minha página não possui a fantástica fonte Helvetica Neue, que é utilizada no template do Escola Sites, mas como acima eu indiquei onde ele pode encontrar a fonte, posso ficar tranquilo que a fonte será exibida corretamente.

Usar @font-face

E se o visitante já possuir a fonte?

Há alguns casos que o visitante já possui a fonte que será utilizada no site ou blog em seu computador, assim sendo, seria um completo desperdício realizar o download da fonte novamente através do CSS, para isso podemos incluir mais uma instrução no CSS que irá evitar o download desnecessário. Isso é realizado através da instrução local(), e pode ser melhor visualizada abaixo:

@font-face {
     font-family: 'Helvetica Neue';
     src: local(HelveticaNeue.ttf), url(HelveticaNeue.ttf);
}

Compatibilidade do @font-face

Se todos os navegadores utilizassem o padrão de fontes TTF seria uma maravilha, mas como tudo na vida de um Web Designer tende a ser um pouco mais complicado, pois cada navegador busca adotar seus próprios conceitos. Com isso se você utilizar apenas um padrão de fontes, seus sites carregarão corretamente em alguns navegadores e em outros não. Para isso é necessário utilizar uma declaração completa, com vários padrões, que seria mais o menos assim:

@font-face {
  font-family: 'Helvetica Neue';
  src: url('HelveticaNeue.eot');
  src: url('HelveticaNeue?#iefix') format('embedded-opentype'),
    url('HelveticaNeue.svg#Helvetica Neue') format('svg'),
    url('HelveticaNeue.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Com esta declaração mais completa, você consegue abranger os navegadores, como o Mozilla, Chrome, IE, Safari e outros, fazendo com que sua declaração @font-face seja cross browser, ou seja funcione em todos os navegadores.

Conversão de fontes – @font-face

A maioria das vezes não possuímos as fontes desejadas em todas os padrões, neste caso existe um serviço que considero excelente chamado Font Squirreleste serviço possui a função de converter uma fonte em todos os outros formatos necessários para a utilização do atributo @font-face, além disso ele ainda monta todo o CSS necessário para seu uso, simplesmente fantástico.

Font Squirrel

7 fontes grátis para usar

Aqui mesmo no Escola Sites já publicamos um artigo que apresenta 7 fontes incríveis e grátis para você utilizar em seus templates como @font-face, são fontes realmente muito bonitas e que podem melhorar e muito a tipografia de seu blog, vale a penas conferir, acesse o artigo AQUI.

E você já conhecia o atributo @font-face? Gostou?

Receba as melhores dicas para criar um negócio digital lucrativo

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br