anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Como utilizar qualquer fonte em sua página web com CSS3

Como utilizar fontes em paginas web com CSS3

Fontes padronizadas em páginas web são um dos desejos mais comuns entre os web designers. Quem não gostaria de criar uma página com aquele tipo de letra tão desejado, mas que você não ousa utilizar porque sabe que as chances de seus usuários as possuírem em seus computadores são remotas? Agora, com um código simples em CSS3, você pode processar qualquer fonte que você tem em sua página web, independentemente de instalação no computador do cliente e incrementar o visual do seu site!

Carregando a fonte

Primeiro, baixe a fonte que deseja utilizar e certifique-se de que ela está licenciada para uso na web. Quase todas as fontes livres podem ser usadas ​​em um site e muitas fontes disponíveis possuem uma licença que cobre esse tipo de utilização, mas sempre é bom verificar. Um bom site, com todas essas informações (inclusive de seus criadores) e totalmente gratuito é o Dafont.com. Nele, existem excelentes coleções de fontes gratuitas com milhares de tipos de letras à sua escolha, divididos em categorias e o download é muito simples, não sendo necessário nenhum tipo de cadastro. Ainda há o recurso de pré-visualização, bastando apenas digitar uma palavra ou frase para que você possa ver uma amostra de como ficará o texto na fonte que escolheu, antes mesmo de baixá-la.

Importante: lembre-se de que, ao escolher uma fonte, você também deve verificar se ela possui todos os caracteres necessários para a língua portuguesa. Como a grande maioria é criada por designers de outros países, é muito comum encontrar espécies que não possuam as opções de cedilhas, acentos ou outros caracteres especiais. Sem eles, sua página ficaria cheia de ‘buracos’ no texto, comprometendo a legibilidade e causando um transtorno para você e seus usuários.

Exemplo de fonte com caracteres

Um exemplo de uma boa fonte, com todos os caracteres disponíveis em nossa língua.

Exemplo com caracteres faltando

Um exemplo sem a maioria dos caracteres especiais, observe as lacunas nos campos.

Com as fontes já escolhidas e baixadas, será necessário enviá-las para o servidor juntamente com os arquivos do site. Você pode armazená-las em uma pasta própria, como “fontes”, mas isso é opcional. Lembre-se de incluir os arquivos para as variantes das fontes que você planeja usar, como as versões em negrito ou itálico.

Adicionando font-face em seu código CSS

A marcação @font-face é uma regra CSS que serve para inserir sua própria fonte em um site. O mais importante sobre esta regra é que com ela iniciou-se uma nova perspectiva para a criação do visual de um site para os designers, antes muito limitado. Como dito anteriormente, você pode usar praticamente qualquer fonte que desejar. Atualmente, @font-face é suportada por todos os browsers (Chrome, Firefox, Opera,  Safari e até mesmo o Internet Explorer, a partir de sua versão 9). Apesar disso, leve em consideração que sempre haverá alguém usando um Internet Explorer versão 8 ou inferior (!) e que não conseguirá visualizar os recursos dessa marcação em seu browser. Se você pode dormir com isso, siga em frente. Não esqueça também que navegadores suportam arquivos de fontes específicas, a saber: EOT, OTF, TTF e SVG. (prometo que um dia retornarei ao assunto e escreverei mais a respeito das diferenças entre elas).

Agora vamos a prática: abra o arquivo CSS da página em que você está trabalhando e adicione um @font-face na folha de estilos do site:

@font-face  {
}

Coloque o nome da fonte, isso é muito importante porque você usará esse nome como referência mais tarde ao se referir a ela no documento:

font-family: 'fonte_bonita';

Em seguida, ainda dentro da seção font-face, forneça a localização do arquivo. Não esqueça também de colocar a extensão da fonte (como mencionei anteriormente, existem várias extensões de fontes, e é necessário especificá-las):

src: 
      url(‘fontes/fonte_bonita.otf’);
      format(‘opentype’)
src: 
      url(‘fontes/fonte_bonita.ttf’);
      format(‘truetype’)

Como outra medida de eficiência opcional, pode-se obter o navegador para verificar se há uma cópia local da fonte já instalada no computador do usuário. Estenda seu código novamente como se segue, acrescentando a seção Local antes de especificar o URL, para que a fonte só seja baixada caso necessário:

src
      Local(‘Fonte bonita’)
      Local(‘Fonte-bonita)
      url(‘fontes/fonte_bonita.otf’);
      format(‘opentype’)
src
      Local(‘Fonte bonita’)
      Local(‘Fonte-bonita)
      url(‘fontes/fonte_bonita.ttf’);
      format(‘truetype’)

A adição é a mesma para ambos OTF e de TTF. Sempre especifique o nome da fonte, após o local de  palavra-chave.

Neste caso, temos duas linhas especificando a fonte local, porque o nome da fonte tem mais de uma palavra nele. A versão hifenizada atende para o modo como os nomes das fontes são armazenadas em determinados sistemas operacionais (esta linha adicional não é necessário se a fonte tem apenas uma única palavra em seu nome). Importante: se acontecer de você saber que uma fonte pode ter nomes diferentes em diferentes sistemas, incluir cada uma das possibilidades em seu  local de  seção.

Aplicando a fonte nos elementos da página

Finalmente, podemos aplicar a fonte para os elementos da página. No código CSS para um elemento particular, ou grupo de elementos, basta especificar o nome que você usou:

  div {font-family:'fonte_bonita', sans-serif;}

Incluindo as variantes da fonte

Se, por exemplo, você quer usar uma versão mais ‘ousada’ de sua fonte, simplesmente inclua a outra font-face com o URL em negrito do arquivo fonte e uma declaração de “font-weight: bold;”. Especifique uma espessura de fonte em negrito para qualquer elemento com a fonte personalizada aplicada a ele e o navegador irá processar automaticamente a versão em negrito:

/*versão padrão da fonte*/
@font-face {
      font-family: 'Fonte_Bonita';
      src: url('fontes/fontes_bonita.otf);
      src:
      local('Fonte Bonita'),
      local('Fonte-Bonita'),
      url('fonts/fonte_bonita.otf')
      format('opentype');
}
/*versão em negrito*/
      @font-face {
      font-family:'Fonte_Bonita';
      src: url('fontes/Fonte_Bonita_bold.otf');
      src:
      local(Fonte Bonita Bold'),
      local(Fonte-Bonita-Bold'),
      url('fontes/Fonte_Bonita_bold.otf')
      format('opentype');
      font-weight: bold;
}
/*aplicando a um elemento*/
div { font-family: 'Fonte_Bonita', sans-serif; }
/*elementos de span dentro da div*/
span { font-weight: bold; }

Achou difícil? Na verdade, o processo é até simples se comparado ao custo-benefício. Com apenas poucas linhas e inserindo os arquivos da fonte no servidor, você poderá melhorar a aparência das suas páginas web com as fontes que desejar! Se você usa CSS3 para expandir os tipos de fontes disponíveis para você ou usa um serviço como Typekit da Adobe ou WebFonts do Google, deixe-nos saber nos comentários.  Compartilhe conosco sua experiências e dicas e não deixe de Curtir e Compartilhar o post nas redes sociais para que os seus amigos possam acompanhar os próximos posts!

Até a próxima!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Logo LESS CSS
A Maravilha do LESS CSS
A um tempo os desenvolvedores front end vêm reclamando que o trabalho está muito repetitivo,