COS-General

¿Cómo puedo agregar Google Fonts a mi página?

Última actualización: February 5, 2016

Las etiquetas de enlace de Google Font pueden agregarse a la HTML del encabezado o el código @import puede añadirse a la parte superior de tu archivo CSS. Antes de hacerlo, primero debes obtener el script de Google Font de Google. Estas instrucciones explican el método @import.

Obtener tu script de Google Font

Navega a www.google.com/fonts y busca la fuente deseada. Haz clic en el botón azul Agregar a la colección en el lado derecho de la fuente.

Tu colección se mostrará en la parte inferior de la pantalla. Cuando la veas, selecciona el botón Usar en la parte inferior derecha de la pantalla.

Después de hacer clic en Usar, desplázate hacia abajo hasta el Paso 3, selecciona la pestaña @import y copia el script proporcionado por Google; por ejemplo @import url(http://fonts.googleapis.com/css?family=Open+Sans);

Una vez que hayas copiado este código, puedes regresar a HubSpot para aplicar la fuente de Google Font.

Aplicar una fuente de Google Font a las páginas de destino del COS de HubSpot

Busca la hoja de estilo que se está aplicando a tus páginas. Puedes encontrar tu hoja de estilos en Contenido > Administrador de diseño.

Pega el código @import en la primera línea de tu archivo CSS. Debe estar en la primera línea para que pueda cargar la fuente.

Además, asegúrate de quitar http: del script; al hacerlo, permitirás que la fuente cargue mientras se obtiene una vista previa de una página de destino de HubSpot. Cuando ya hayas pegado el script, haz clic en Guardar cambios.

Ahora que has insertado tu fuente de Google Font en tu archivo CSS, puedes llamar a eso familia de la fuente como una propiedad CSS a través de su código. En otras palabras, dentro de tu hoja de estilos CSS personalizada, aplica la fuente de Google Font en cualquier selector de CSS deseado, tal como se muestra a continuación. Asegúrate de establecer, dentro de tus selectores de CSS, la familia de fuentes para poder utilizar la fuente de Google Font.

Imagen añadida por el usuario

Artículos relacionados: