Como Utilizar @font-face

Como utilizar @font-face numa página web.

A regra CSS @font-face possibilita utilizar fontes externas num página web. Agora os obstáculos à criação de conteúdos  para a net com uma determinada tipografia já era do passado, com esta regra CSS, já se pode criar, ao nosso gosto, e ter-se a certeza que os utilizadores vão ver os conteúdos tal como os criámos.

Imagine que elabora um website com a fonte Helvetica, e que deseja que todos que visitarem o seu website o vejam tal como o fez. O problema é que se os visitantes não tiverem essa fonte instalada nos seus computadores não vão conseguir ver tal como você desejava, e verão com uma fonte diferente, a que estiver por defeito nos seus computadores/browsers. Com esta nova forma esse problema é ultrapassado e os browsers dos visitantes irão carregar uma cópia da fonte, que você hospedou no servidor da sua página web, para esse efeito.

O código e as Opções:

.

@font-face {
font-family: ‘NomeDaFonte, por exemplo; Helvetica’;
src: url(‘nomedafont.eot’);  /* Para Browsers = ou > IE9 */
src: url(‘nomedafont.eot?#iefix’) format(‘embedded-opentype’), /* Para Browsers IE6-IE8 */
      url('webfont.woff') format('woff'), /* Para Browsers Modernos */
      url(‘nomedafont.svg#Locaweb-Icons’) format(‘svg’), /* Para Legacy iOS */
      url(‘nomedafont.ttf’) format(‘truetype’);  /* Para Safari, Android, iOS */
font-weight: normal;  /* 100 a 900, conforme a fonte */
font-style: normal; /* italic, conforme a fonte */
}

Deve-se colocar o valor das propriedades font-weight e font-style de acordo com a font que se está a utilizar.

Compatibilidade:

A compatibilidade é bastante boa, mesmo assim existem alguns problemas, veja abaixo;

- As versões 7, 8 e 9 do Internet Explorer só  aceitam se a fonte for .eot. Pode-se encontrar online conversores que resolvem esse problema e que convertem as fonts para .eot. É o caso do seguinte site; Font Squirrel.

Implementação:

- Fazer download das fontes e colocá-las dentro de uma pasta com o nome fonts. Esta pasta deve estar dentro da pasta das folhas CSS.
- Numa folha de CSS aplica-se o código abaixo, com os caminhos (url) das fontes; Download

Código @font-face

Para copiar o código clicar no ícone abaixo

@font-face {
 font-family: 'NomeFonte';
 src: url('fonts/webfont.eot');
 src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'),
 url('fonts/webfont.woff') format('woff'),
 url('fonts/webfont.ttf')  format('truetype'),
 url('fonts/webfont.svg#svgFontName') format('svg');
}

- Na Tag onde se pretende que a fonte seja utilizada, coloca-se o código abaixo.

Para copiar o código clicar no ícone abaixo

body {
       font-family: 'NomeFonte', Fonte Alternativa, sans-serif;
}

Atenção à utilização das Fontes Pagas:

Um dos grandes problema na utilização de @font-face é que os arquivo da fonte que se está a utilizar tem que ser disponibilizado no servidor e desta forma qualquer pessoa poderá ter acesso a esta e fazer download.
Se estiver a utilizar uma fonte paga, com direitos de copyright, o download desta fonte é ilegal e quem está a disponibilizá-la pode vir a ser responsabilizado por isso, pois estas são para utilização pessoal e não podem ser compartilhadas ou dadas a outros.
No entanto existe solução para este problema, existem muitas fontes que são grátis, e com estas não há problema nenhum, por essa razão e caso não tenha mesmo que utilizar uma fonte paga, certifique-se de que utiliza uma fonte gratuita, assim poderá evitar problemas. Exemplo de um site com fontes gratuitas, aqui.

Também existe a opção de se utilizar as fonte da Google, (Google Fonts), que são grátis. Ver um exemplo, aqui.