Conceptos básicos de la API de fuentes de Google - Trucos CSS

Enlace a archivos CSS

Básicamente, tiene un enlace directo a los archivos CSS en Google.com. A través de los parámetros de URL, usted especifica qué fuentes desea y qué variaciones de esas fuentes.

… 

Idea: puede evitar una solicitud de red adicional abriendo esa hoja de estilo y copiando y pegando el material @ font-face en su hoja de estilo principal. Pero cuidado: Google hace algunas cosas de rastreo de agentes de usuario para, a veces, servir diferentes cosas a diferentes dispositivos según sea necesario. No se beneficiará de eso si se hace de esta manera.

CSS

En su CSS, puede especificar estas nuevas fuentes por nombre en cualquier elemento que desee utilizar.

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

FontLoader

Puede utilizar FontLoader JavaScript en lugar de vincular al CSS. Tiene ventajas, como controlar el Flash de texto sin estilo (FOUT), y también desventajas, como el hecho de que las fuentes no se cargan para los usuarios con JavaScript desactivado.

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

Esos nombres de clase, por ejemplo, .wf-loadingse aplican al elemento. Así que observe que cuando las fuentes se están "cargando", puede usar ese nombre de clase para ocultar el texto. Luego, cuando se muestren, hazlos visibles nuevamente. Así es como se controla FOUT.