A algum tempo atrás, quando o layout do site vinha para as mão do programador cheio de fonte diferente e “bonitinha” já era automático começar a recortar as imagens para deixar tudo estático no HTML.

Os problemas com essa antiga solução são vários. Primeiro que o google não “lê” (ainda) imagens e portanto todo o conteúdo em texto dentro de uma imagem não irá contar para o ranqueamento da página. O máximo que dá para fazer no caso é colocar um texto escondido onde fica a imagem, o que não fica nem perto de ideal.

Outro problema é que para cada imagem com o texto que você utilizar no seu site é mais um arquivo a ser carregado pelo navegador do cliente, mais pesada ficará sua página e menos desempenho terá o seu site. Isso também prejudica ranqueamento, tendo em vista que esse é diretamente relacionado com o quão boa é a experiência do usuário em seu site.

A solução agora é importar as fontes diferentes das padrões que você utiliza em seu site com CSS. Assim apenas um arquivo será carregado para formar os textos com as fontes externas.

Para isso você deverá criar uma regra CSS para a fonte da seguinte forma:

@font-face {
font-family: 'StMarieThin';
src: url('StMarie-Thin-webfont.eot');
src: url('StMarie-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('StMarie-Thin-webfont.woff') format('woff'),
url('StMarie-Thin-webfont.ttf') format('truetype'),
url('StMarie-Thin-webfont.svg#StMarieThin') format('svg');
font-weight: normal;
font-style: normal;
}

Como sempre, cada navegador tem o seu formato específico de arquivo de fonte e por conta disso temos vários arquivos definidos na regra CSS.

Para então criar uma caixa (div, span, ou qualquer outra tag HTML) com a fonte definida fazemos com a propriedade font-family.

<style>
div.fonte-bonita {
font-family: ‘StMarieThin’;
}
</style>

<div class=”fonte-bonita”>
Aqui vai seu texto, título, item de menu, ou qualquer outro item que deseje com a fonte diferente.
</div>

Qualquer dúvida só deixar na caixa de comentários.