Começar a usar a API Google Fonts

Este guia explica como usar a API Google Fonts para adicionar fontes à sua Web páginas de destino. Você não precisa programar nada. basta adicionar um na folha de estilo do seu documento HTML e consulte 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 abaixo, na fonte chamada Tangerine:

Como deixar a Web bonita

Essa frase é um texto comum, portanto, você pode alterar a aparência usando CSS. Testar adicionando uma sombra ao estilo no 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 bonita

E esse é só o começo do que você pode fazer com a API Fonts e CSS.

Visão geral

Você pode começar a usar a API Google Fonts em apenas duas etapas:

  1. 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">

  2. Defina o estilo de um elemento com a fonte da Web solicitada, seja 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 ver uma lista das fontes que você pode usar, consulte Google Fonts.

Especificar famílias e estilos de fontes em um URL da folha de estilo

Para determinar qual URL usar no link da folha de estilo, comece com a tag URL base da API Fonts:

https://fonts.googleapis.com/css

Em seguida, adicione o parâmetro de URL family= com um ou mais nomes de famílias de fontes e estilos.

Por exemplo, para solicitar 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 Tangerina, Inconsolata e Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Solicitar várias fontes permite que você use todas elas na sua página. (Mas não exagere, pois a maioria das páginas não precisa de muitas fontes, e a solicitação de um muitas fontes podem deixar o carregamento das páginas mais lento.

A API Google Fonts fornece a versão regular das fontes solicitadas por padrão. Para solicitar outros estilos ou pesos, anexe dois-pontos (:) ao nome de a fonte, seguido por 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 o da listagem de fontes no Google Fonts.

Para cada estilo solicitado, você pode dar o nome completo ou uma abreviação para pesos, você também pode 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 Cantarell e negrito Droid Serif, você pode usar qualquer 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 permite que você controlar o que acontece enquanto a fonte está indisponível. Especificar um valor diferente do que o auto padrão costuma ser apropriado.

Insira o valor desejado no parâmetro display da string de consulta: 

https://fonts.googleapis.com/css?family=Roboto&display=swap

Especificar subconjuntos de scripts

Algumas das fontes do Diretório de fontes do Google oferecem suporte a vários scripts (como latino, cirílico e grego, por exemplo). Para para especificar quais subconjuntos devem ser baixados, o parâmetro do subconjunto deve ser anexado ao URL.

Por exemplo, para solicitar o subconjunto cirílico do Roboto Mono, o URL será ser:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Para solicitar o subconjunto grego do Roboto Mono, o URL será ser:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Para solicitar subconjuntos gregos e cirílicos do Roboto Mono, o URL será ser:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

O subconjunto em latim será sempre incluído, se disponível e não precisa ser especificado. Se um navegador de cliente oferecer suporte a unicode-range (http://caniuse.com/#feat=font-unicode-range) o parâmetro subconjunto é ignorado; o navegador selecionará entre os subconjuntos suportado pela fonte para conseguir o que precisa para renderizar o texto.

Para obter uma lista completa de fontes e subconjuntos de fontes disponíveis, consulte Fontes do Google.

Como otimizar suas solicitações de fonte

Muitas vezes, quando você quer usar uma fonte da Web em seu site ou aplicativo, saber com antecedência de quais cartas você precisará. Isso geralmente ocorre quando você está usando um fonte da Web em um logotipo ou título.

Nesses casos, especifique um valor text= na fonte. URL de solicitação. Isso permite que o Google retorne um arquivo de fonte otimizado para seu solicitação. Em alguns casos, isso pode reduzir o tamanho do arquivo da fonte em até 90%.

Para usar esse recurso, basta adicionar text= às solicitações da API Google Fonts. Para Por exemplo, se você estiver usando Inconsolata apenas para o título do seu blog, poderá colocar o próprio título como o valor de text=. Esta é a aparência da solicitação como:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Assim como acontece com todas as strings de consulta, codifique 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 UTF-8 caracteres. 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 exibir textos em seu site, você vai querer estilizar o texto de maneira decorativa. Para simplificar seu trabalho, o Google forneceu uma coleção de efeitos de fonte que você pode usar com o mínimo de esforço para a produzir um belo texto de exibição. Exemplo:

Este é um efeito de fonte!

Para usar este recurso Beta, basta adicionar effect= ao Google Fonts solicitação de API e adicione o nome de classe correspondente aos elementos HTML que você querem afetar. No exemplo acima, usamos o efeito de fonte shadow-multiple, Assim, a solicitação seria semelhante a esta:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Para usar o efeito, adicione o nome da classe correspondente aos elementos HTML. A o nome da classe correspondente é sempre o nome do efeito prefixado com font-effect-, então, o nome da classe de shadow-multiple seria font-effect-shadow-multiple:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Você pode solicitar vários efeitos separando os nomes deles com uma barra vertical caractere (|).

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 classe Suporte
Anaglifo anaglyph font-effect-anaglyph Google 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 (link em inglês) crackle font-effect-crackle Chrome e Safari
Declínio 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 polida distressed-wood font-effect-distressed-wood Chrome e Safari
Em relevo emboss font-effect-emboss Google Chrome, Firefox, Opera e Safari
Corpo de bombeiros fire font-effect-fire Google Chrome, Firefox, Opera e Safari
Animação de fogo fire-animation font-effect-fire-animation Google Chrome, Firefox, Opera e Safari
Frágil fragile font-effect-fragile Chrome e Safari
Prancha grass font-effect-grass Chrome e Safari
Gelo ice font-effect-ice Chrome e Safari
Mitose mitosis font-effect-mitosis Chrome e Safari
Neon (link em inglês) neon font-effect-neon Google Chrome, Firefox, Opera e Safari
Outline outline font-effect-outline Google Chrome, Firefox, Opera e Safari
Putting Green putting-green font-effect-putting-green Chrome e Safari
Aço raspado scuffed-steel font-effect-scuffed-steel Chrome e Safari
Sombra múltipla shadow-multiple font-effect-shadow-multiple Google 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 Google Chrome, Firefox, Opera e Safari
Ponto flutuante tridimensional 3d-float font-effect-3d-float Google 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 estilizar fontes, e muitas coisas são possíveis pelo CSS. Estamos apenas fornecendo algumas ideias para você começar. Para mais ideias, experimente a pesquisa do Google "efeitos de texto CSS" e e navegue por muitas das ideias que já estão na web!

Leitura adicional