Fontes personalizadas estão entre os aspectos mais atraentes do CSS3 para designers. Com a regra font-face , você pode renderizar qualquer fonte que tenha on-line dentro do texto da sua página da web, independentemente de o usuário tê-lo instalado ou não.
Como na maioria das técnicas CSS3, o código básico é bem simples, mas a realidade prática é um pouco mais complexa.
Neste breve tutorial, veremos o básico de incluir fontes personalizadas nas suas páginas.
Primeiro, verifique se a fonte que você deseja usar está licenciada para uso na web. Quase todas as fontes gratuitas podem ser usadas em um site e muitas fontes premium estão disponíveis com uma licença que cobre o uso da web.
Em seguida, envie sua fonte escolhida para o seu servidor. Você pode querer armazená-lo em um diretório “fonts” dedicado, mas isso é opcional.
Lembre-se de incluir os arquivos para quaisquer variantes da fonte que você planeja usar, como negrito ou itálico. Você pode usar arquivos EOT (Embedded OpenType) para o Internet Explorer e OTF (OpenType) ou TTF (TrueType) para o resto. (Opções adicionais incluem WOFF (Web Open Font Format) e SVG (Scalable Vector Graphics), mas vamos nos ater aos tipos mais comuns aqui.)
Anote onde os arquivos de fonte estão armazenados em seu servidor.
Abra o arquivo HTML ou CSS da página em que você está trabalhando. Adicione uma declaração de face de fonte ao código de estilo:
@font-face {}Primeiro dentro da seção de fonte , dê à fonte um nome que você possa usar posteriormente para se referir a ela:
font-family: 'lovelyFont';Em seguida, ainda dentro da seção de fonte , forneça a localização do arquivo EOT:
src: url('fonts/lovely_font.eot');Altere a localização e o nome da fonte conforme necessário. Em seguida, adicione uma fonte de OTF e / ou TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Este é o esqueleto do código necessário, que será suficiente em muitos casos. No entanto, existem etapas adicionais que podemos seguir para tornar o código mais confiável. Primeiro estenda esta seção para incluir um indicador do tipo de arquivo de fonte:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Como outra medida de eficiência opcional, podemos obter o navegador para verificar uma cópia local da fonte, caso o usuário já a tenha. Estenda seu código novamente da seguinte maneira, adicionando a seção local antes de especificar a URL, para que a fonte só seja baixada se necessário:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');A adição é a mesma para OTF e TTF. Nós especificamos o nome da fonte após a palavra-chave local .
Neste caso, temos duas linhas especificando a fonte local, porque o nome da fonte contém mais de uma palavra. A versão hifenizada serve para o modo como os nomes das fontes são armazenados em determinados sistemas operacionais - essa linha adicional não é necessária se a fonte tiver apenas uma única palavra em seu nome. Se acontecer de você saber que uma fonte pode ter nomes diferentes em sistemas diferentes, inclua cada uma das possibilidades em sua seção local .
Finalmente, podemos aplicar a fonte aos elementos da página. No código CSS de um determinado elemento ou grupo de elementos, basta especificar o nome da fonte que você usou, incluindo todos os substitutos escolhidos:
div { font-family: 'lovelyFont', sans-serif; }Se, por exemplo, você quiser usar uma versão em negrito de sua fonte, simplesmente inclua outra seção de fonte com a URL do arquivo de fonte em negrito e uma declaração de “font-weight: bold;”. Especifique um peso de fonte em negrito para qualquer elemento com a fonte personalizada aplicada a ele e o navegador renderizará automaticamente a versão em negrito:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }É isso aí!
Você usa CSS3 para expandir as faces de tipos disponíveis para você? Você usa um serviço como o Typekit da Adobe ou os Webfonts do Google? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de fontes via Shutterstock.