Esta página foi traduzida pela API Cloud Translation.

Começar a usar a API Google Fonts

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:

Como deixar a Web mais bonita

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:

Como deixar a Web mais bonita

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:

Este é um efeito de fonte!

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
Iminência	`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.