Este guia explica como usar a API Google Fonts para adicionar fontes às suas páginas da Web. Não é necessário fazer nenhuma programação. Basta adicionar um link de folha de estilo especial ao documento HTML e consultar a fonte em um estilo CSS.
Um exemplo rápido
Veja um exemplo. Copie e cole o seguinte HTML em um arquivo:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
Em seguida, abra o arquivo em um navegador da Web moderno. Você verá uma página exibindo o seguinte, na fonte chamada Tangerine:
Essa frase é um texto comum, então você pode mudar a aparência dela usando CSS. Tente adicionar uma sombra ao estilo do exemplo anterior:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
Agora você verá uma sombra projetada abaixo do texto:
E isso é apenas o começo do que você pode fazer com a API Fonts e o CSS.
Informações gerais
Você pode começar a usar a API Google Fonts em apenas duas etapas:
Adicione um link da folha de estilo para solicitar as fontes da Web desejadas:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Definir o estilo de um elemento com a fonte da Web solicitada em uma folha de estilo:
.css-selector { font-family: 'Font Name', serif; }
ou com um estilo in-line no próprio elemento:
<div style="font-family: 'Font Name', serif;">Your text</div>
Para conferir uma lista das fontes que você pode usar, consulte Google Fonts.
Como especificar famílias e estilos de fontes em um URL de folha de estilo
Para determinar qual URL usar no link da sua folha de estilo, comece com o URL base da API Google Fonts:
https://fonts.googleapis.com/css
Em seguida, adicione o parâmetro de URL family=
com um ou mais nomes e estilos de família de fontes.
Por exemplo, para solicitar a fonte Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
Para solicitar várias famílias de fontes, separe os nomes com uma barra vertical
(|
).
Por exemplo, para solicitar as fontes Tangerine, Inconsolata e Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
A solicitação de várias fontes permite que você use todas elas na sua página. Mas não exagere, porque a maioria das páginas não precisa de muitas fontes. Além disso, solicitar muitas fontes pode deixar o carregamento lento.
A API Google Fonts oferece a versão normal das fontes solicitadas por
padrão. Para solicitar outros estilos ou pesos, coloque dois pontos (:
) no nome da
fonte e uma lista de estilos ou pesos separados por vírgulas (,
).
Exemplo:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Para descobrir quais estilos e pesos estão disponíveis para uma determinada fonte, consulte a lista de fontes no Google Fonts.
Para cada estilo solicitado, é possível fornecer o nome completo ou uma abreviação. Para pesos, é possível especificar um peso numérico:
Estilo | Especificadores |
---|---|
itálico | italic ou i |
negrito | bold ou b ou um peso numérico como 700 |
negrito e itálico | bolditalic ou bi |
Por exemplo, para solicitar itálico de Cantarell e negrito Droid Serif, você pode usar qualquer um dos seguintes URLs:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Usar a exibição de fontes
font-display: você pode
controlar o que acontece enquanto a fonte está indisponível. Geralmente, é apropriado especificar um valor diferente do auto
padrão.
Transmita o valor desejado no parâmetro display
da string de consulta:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Como especificar subconjuntos de scripts
Algumas das fontes do Google Font Directory são compatíveis com vários scripts, como latino, cirílico e grego, por exemplo. Para especificar os subconjuntos que vão receber o download, o parâmetro de subconjunto precisa ser anexado ao URL.
Por exemplo, para solicitar o subconjunto cirílico da fonte Roboto Mono, o URL seria:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Para solicitar o subconjunto grego da fonte Roboto Mono, o URL seria:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Para solicitar subconjuntos grego e cirílico da fonte Roboto Mono, o URL seria:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
O subconjunto latino será sempre incluído se estiver disponível e não precisa ser especificado. Se um navegador cliente oferecer suporte a unicode-range (http://caniuse.com/#feat=font-unicode-range), o parâmetro de subconjunto será ignorado. O navegador selecionará entre os subconjuntos compatíveis com a fonte para receber o que é necessário para renderizar o texto.
Para conferir uma lista completa de fontes e subconjuntos de fontes disponíveis, consulte Google Fonts.
Otimizar suas solicitações de fontes
Muitas vezes, quando você quer usar uma fonte da Web no seu site ou aplicativo, sabe com antecedência quais letras serão necessárias. Isso geralmente ocorre quando você está usando uma fonte da Web em um logotipo ou cabeçalho.
Nesses casos, considere especificar um valor text=
no URL de solicitação
da fonte. Isso permite que o Google retorne um arquivo de fonte otimizado para sua
solicitação. Em alguns casos, isso pode reduzir o tamanho do arquivo de fonte em até 90%.
Para usar esse recurso, basta adicionar text=
às solicitações da API Google Fonts. Por exemplo, se você estiver usando apenas o Inconsolata para o título do seu blog, é possível colocar o próprio título como o valor de text=
. A solicitação ficaria assim:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Assim como acontece com todas as strings de consulta, você deve codificar o valor para URL:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Esse recurso também funciona para fontes internacionais, permitindo que você especifique caracteres UTF-8. Por exemplo, “Hola!” é representado como:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Como ativar efeitos de fonte (Beta)
Ao criar cabeçalhos ou textos de exibição no seu site, talvez você queira estilizar seu texto de forma decorativa. Para simplificar seu trabalho, o Google forneceu uma coleção de efeitos de fonte que podem ser usados com esforço mínimo para produzir um texto de exibição bonito. Exemplo:
Para usar esse recurso Beta, basta adicionar effect=
à solicitação da API Google Fonts
e incluir o nome da classe correspondente aos elementos HTML que você
quer afetar. No exemplo acima, usamos o efeito de fonte shadow-multiple
,
de modo que a solicitação ficaria assim:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Para usar o efeito, adicione o nome da classe correspondente aos elementos HTML. O
nome da classe correspondente é sempre o nome do efeito prefixado com font-effect-
,
então o nome da classe para shadow-multiple
seria font-effect-shadow-multiple
:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
É possível solicitar vários efeitos separando os nomes deles com um caractere de
barra vertical (|
).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Esta é uma lista completa de todos os efeitos de fonte que oferecemos:
Efeito | Nome da API | Nome da aula | Suporte |
---|---|---|---|
Anáglifo | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera e Safari |
Placas de tijolos | brick-sign |
font-effect-brick-sign |
Chrome e Safari |
Impressão em tela | canvas-print |
font-effect-canvas-print |
Chrome e Safari |
Crackle (em inglês) | crackle |
font-effect-crackle |
Chrome e Safari |
decaying |
font-effect-decaying |
Chrome e Safari | |
Destruição | destruction |
font-effect-destruction |
Chrome e Safari |
Estressado | distressed |
font-effect-distressed |
Chrome e Safari |
Madeira afligada | distressed-wood |
font-effect-distressed-wood |
Chrome e Safari |
Gravação | emboss |
font-effect-emboss |
Chrome, Firefox, Opera e Safari |
Corpo de bombeiros | fire |
font-effect-fire |
Chrome, Firefox, Opera e Safari |
Animação de fogo | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera e Safari |
Frágil | fragile |
font-effect-fragile |
Chrome e Safari |
Grama | grass |
font-effect-grass |
Chrome e Safari |
Gelo | ice |
font-effect-ice |
Chrome e Safari |
Mitose | mitosis |
font-effect-mitosis |
Chrome e Safari |
Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera e Safari |
Outline | outline |
font-effect-outline |
Chrome, Firefox, Opera e Safari |
Putting Green | putting-green |
font-effect-putting-green |
Chrome e Safari |
Aço arranhado | scuffed-steel |
font-effect-scuffed-steel |
Chrome e Safari |
Várias sombras | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera e Safari |
Fragmentado | splintered |
font-effect-splintered |
Chrome e Safari |
Estática | static |
font-effect-static |
Chrome e Safari |
Stonewash | stonewash |
font-effect-stonewash |
Chrome e Safari |
Três dimensões | 3d |
font-effect-3d |
Chrome, Firefox, Opera e Safari |
Flutuante tridimensional | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera e Safari |
Vintage (link em inglês) | vintage |
font-effect-vintage |
Chrome e Safari |
Plano de fundo | wallpaper |
font-effect-wallpaper |
Chrome e Safari |
Há muitas outras maneiras de definir o estilo de fontes e muitas coisas são possíveis usando CSS. Temos apenas algumas ideias para você começar. Para mais ideias, pesquise no Google por "efeitos de texto CSS" (em inglês) e navegue por muitas das ideias que já estão na Web.
Leia mais
- Confira uma lista completa de famílias de fontes fornecidas pela API Google Fonts no Google Fonts.
- Aprenda a usar o Web Font Loader para ter mais controle sobre o carregamento de fontes.
- Saiba mais sobre como a API Google Fonts funciona na página Considerações técnicas.