Noções básicas da API de fontes do Google - CSS-Tricks

Link para arquivos CSS

Basicamente, você faz um hotlink direto para arquivos CSS no Google.com. Por meio dos parâmetros de URL, você especifica quais fontes deseja e quais variações dessas fontes.

… 

Ideia: você pode evitar uma solicitação extra de rede abrindo essa folha de estilo e copiando e colando o material @ font-face em sua folha de estilo principal. Mas cuidado: o Google faz algumas coisas de sniffing do User Agent para, às vezes, servir coisas diferentes para dispositivos diferentes, conforme necessário. Você não se beneficiará disso se for feito dessa maneira.

CSS

Em seu CSS, você pode especificar essas novas fontes por nome em qualquer elemento que deseja usar.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Você pode usar o FontLoader JavaScript em vez de vincular ao CSS. Tem vantagens, como controlar o Flash de Texto Unstyled (FOUT), e também desvantagens, como o fato de que as fontes não carregam para usuários com o JavaScript desativado.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Esses nomes de classe, por exemplo, .wf-loadingsão aplicados ao elemento. Portanto, observe quando as fontes estão “carregando”, você pode usar o nome da classe para ocultar o texto. Então, quando eles forem mostrados, torne-os visíveis novamente. É assim que FOUT é controlado.