Cómo usar Google Fonts en HTML y CSS

Hay numerosas fuentes disponibles en HTML y CSS, pero si no está satisfecho con las fuentes HTML/CSS estándar y opta por algunas fuentes nuevas, frescas y más recientes, puede usar Google Fonts. Google Font es la biblioteca en línea de Google que nos permite usar diferentes familias de fuentes a través de CDN (acrónimo de la red de entrega de contenido) que es de uso gratuito para todos.

Este artículo lo guiará en los siguientes aspectos con respecto a las fuentes de Google:

• Guía paso a paso para las fuentes de Google
• Cómo usar varias fuentes de Google
• Cómo diseñar Fuentes de Google

Guía paso a paso para las fuentes de Google

Para usar las fuentes de Google, debe seguir los siguientes pasos:

Primer paso
Visite el sitio web oficial de Google Fonts y aparecerá la siguiente ventana:

Segundo paso
Seleccione la categoría/ familia de fuentes de su elección:

Tercer paso
Seleccione la fuente de Google de su elección (E.gramo. Quintessentia):

Ahora haga clic en el "Seleccione este estilo":

Cuarto paso
Copie el enlace del estilo seleccionado desde la ventana que aparece en el lado derecho de la pantalla:

Pegue el enlace en la sección principal del documento HTML:

Quinto paso
Copie las reglas de CSS para la familia de fuentes

Y péguelo en el archivo CSS:

Queremos aplicar el estilo en el

elemento, así que lo pegamos en el selector P. Ahora obtendremos la siguiente salida:

La salida muestra que la fuente de Google "quintessential" se implementa en el

elemento con éxito.

Cómo usar varias fuentes de Google

Todo el procedimiento será el mismo, seleccione las múltiples fuentes de Google, copie el enlace y péguelo en la sección Head del archivo HTML:

Html

Fuentes CSS

Primer párrafo

Segundo parrafo

CSS

Ahora seleccionamos dos fuentes de Google diferentes I.mi. "Consolador" y "Open Sans", queremos usar "edredón" para el

elemento y "sans abierto" para el

elementos. Entonces, nuestro CSS se verá así:

H3
Font-Family: 'Consolador', cursivo;

pags
Font-Family: 'Open Sans', Sans-Serif;

En el archivo CSS, pegue las reglas CSS en selectores de elementos para diseñarlos de acuerdo con la elección. Reducirá la siguiente salida:

La salida demuestra que las reglas CSS se implementan con éxito en los elementos HTML.

Cómo diseñar Fuentes de Google

Con la ayuda de las propiedades de CSS podemos diseñar las fuentes de Google de acuerdo con nuestra elección, nuestro archivo HTML seguirá siendo el mismo y el archivo CSS se verá así:

CSS

H3
Font-Family: 'Consolador', cursivo;
color rojo;
Shadow de texto: 5px 5px 5px #83647E;

pags
Font-Family: 'Open Sans', Sans-Serif;
color rojo;
Shadow de texto: 5px 5px 5px #83647E;

La salida del fragmento dada anteriormente aparecerá así:

Conclusión

Para agregar fuentes de Google, busque las fuentes de Google, seleccione la categoría de fuentes y la familia, luego seleccione el estilo de fuente de su elección. Una vez que seleccione la fuente, "Copie el enlace de fuente", de las "ventanas de familias seleccionadas" y péguela en la sección principal del archivo HTML. A continuación, copie las "Reglas de CSS para el enlace de fuentes" y péguelo en el selector CSS. El estilo se puede agregar a las fuentes de Google utilizando las propiedades CSS.