Texto de: Letícia Garcez
Introdução
As fontes desempenham um papel importante na aparência e experiência do usuário em uma aplicação. Uma fonte que dificulte a leitura, por exemplo, pode tornar a sua aplicação muito difícil de usar. Além das opções de fontes padrão do HTML e do CSS, existem diversas outras fontes que podem ser adicionadas à sua aplicação, e neste artigo veremos algumas maneiras de adicionar fontes à aplicação usando um dos sites mais populares para esse propósito: o Google Fonts.
Escolhendo a fonte
O Google Fonts é um site de fontes do Google que pode ser acesso através do link fonts.google.com. Uma vez que você esteja no site, você pode começar a buscar por uma fonte que lhe agrade entre as fontes disponíveis. É possível fazer uma busca no site filtrando pelo nome da fonte, categorias, idioma, número de estilos da fonte e é possível visualizar a fonte em diferentes tamanhos e com uma string de teste específica.
Ao colocar uma string de teste, é possível ver como essa string se parece em todas as fontes mostradas na tela. Se a sua aplicação utilizar a língua portuguesa, recomendo que você faça um teste colocando palavras acentuadas na string de teste para ter certeza que a fonte que você selecionou tem o suporte correto a este tipo de caractere.
Após selecionar a fonte que você quer utilizar, basta clicar nela para ver mais informações sobre ela.
Escolhendo as versões da fonte
Uma vez selecionada uma fonte, você pode especificar uma língua para ver o texto de teste padrão da fonte para aquela língua e as variações disponíveis na fonte. Também é possível fazer um teste de escrita com a fonte, ver todos os caracteres existentes na fonte e obter mais informações sobre a fonte e sobre a licença que ela utiliza nessa mesma página. Verificar a licença utilizada pela fonte é importante para garantir que a fonte que você escolheu pode ser utilizada para o seu objetivo.
Após ter certeza que a fonte que você deseja utilizar atende as suas necessidades, basta selecionar as versões da fonte que você deseja importar na sua aplicação clicando no botão de selecionar.
Ao adicionar um estilo da fonte, um menu lateral se abrirá onde é possível ver as fontes e as versões dessa fonte que você selecionou bem opções para inserir a fonte no seu projeto
Inserir a fonte através do HTML
Para inserir a fonte através do HTML, é preciso selecionar a opção <link>, copiar o código que aparece no primeiro bloco de código e colá-lo na tag <head> do seu documento HTML. Depois disso, basta adicionar o código CSS mostrado no segundo bloco de código ao seletor CSS que representa os elementos onde você deseja adicionar essa fonte.
Inserir a fonte através do CSS
Uma forma alterativa de fazer a inserção da fonte é através do CSS. Para isso, é preciso selecionar a opção @import, copiar o código que aparece no primeiro bloco de código e inseri-lo na tag head do seu documento HTML, ou então copiar apenas o @import e adicioná-lo no documento onde você está desenvolvendo seus estilos. Depois disso, basta adicionar o código CSS mostrado no segundo bloco de código ao seletor CSS que representa os elementos onde você deseja adicionar essa fonte.
Fazendo o download da fonte
Também é possível fazer o download da fonte clicando no botão Download all. Isso fará o download de todas as fontes em um arquivo zip.
As fontes baixadas precisarão ser colocadas dentro da aplicação de alguma forma, normalmente elas são colocadas em uma pasta criada para armazenar este tipo de recurso na sua aplicação, mas você tem liberdade para organizar a inserção das fontes do seu projeto da maneira que você achar melhor.
Após colocar as fontes na aplicação, será preciso definir uma font-face para as fontes adicionadas e adicionar essa font-face no seletor que representa os elementos HTML onde você deseja fazer a inserção como no código abaixo:
@font-face {
font-family:"NOME DA FAMILIA DE FONTES" ;
src: url("CAMINHO PARA ACESSAR A FONTE");
}
body{
font-family: "NOME DA FAMILIA DE FONTES";
}
Considerações finais
Agora você já sabe como utilizar o Google Fonts para selecionar e inserir fontes na sua aplicação. Como as fontes ajudam a definir a “marca” da sua aplicação e também podem melhorar a experiência do usuário, com certeza você deveria se preocupar com esse quesito também para melhorar ainda mais as suas aplicações.
