¿Como cambiar las fuentes con Google fonts?

 

 

¿Como cambiar el tipo de letra de tu sitio web con google fonts ?

 

 Las fuentes se aplican a diversas etiquetas de texto como <p>, <a>, <span>, <input>, <h1>, <h2>, <h3> asi que tenemos que indicar en nuestro archivo de Hoja de estilos que a estos elementos queremos que tengan como tipo de fuente la que vamos a elegir en la pagina de https://www.google.com/fonts  vas a entrar y vas a elegir recomendable solo tres diferentes, una para los enlaces y el texto principal como este que estas leyendo otro para los titulos y el ultimo es adicional lo puedes ocupar para el menú o algún párrafo importante.

 

Si tienes plantilla propia vas a colocar estas eiquetas de la siguiente forma dentro de tu hoja de estilos (CSS):

 

 

p, a, span { font-family: Arial, sans-serif;

      font-size: 12px;

      color: #333333;}

 

h1, h2, h3 {font-family: Arial, sans-serif;

      color: #333333;}

 

h1{ font-size: 26px;}

 

h2{ font-size: 20px;}

 

h3{ font-size: 16px;}

 

input { font-family: Arial, sans-serif;

      font-size: 12px;

       color: #333333;}

 

 

 

 

 

 Si no tienes acceso a la hoja de estilos de tu pagina pero si tienes permiso de escribir en el <head> tienes que copiarlo de la siguiente manera:

 

 

  <style type="text/css">

<!--

p, a, span { font-family: Arial, sans-serif;

      font-size: 12px;

      color: #333333;}

 

h1, h2, h3 {font-family: Arial, sans-serif;

      color: #333333;}

 

h1{ font-size: 26px;}

 

h2{ font-size: 20px;}

 

h3{ font-size: 16px;}

 

input { font-family: Arial, sans-serif;

      font-size: 12px;

       color: #333333;}

 -->

    </style>

 

 

 

 

Lo que estamos indicando es que a las etiquetas <p>, <a> y <span> se le aplique las mismas propiedades, igualmente con las etiquetas de titulo <h1>, <h2>, <h3> pero a estas les estamos indicando por separado y a cada una que tomen tamaños diferentes, Ahora <h1> es el titulo principal y le indicamos que tenga el mayor tamaño y por ultimo y como ejemplo a <input> le indicaremos que tome otro tipo de fuente, esta etiqueta se encuentra en los formularios para introducir un texto y tambien en forma de boton.  

 

 Ahora si dirigete a https://www.google.com/fonts y busca el primer tipo de fuente que va a ser el principal el que se ocupará en la mayor parte de tu pagina.

 

Ya que lo tengas asi como en la imagen tienes tres botones al lado del boton azul das clicka  la que tiene una flechita con dirección a la derecha y en la pagina que se abre te diriges a la seccion n° 3 das click en la pestaña que dice @import (como en la siguiente imagen):

 

Esta regla la vas a copiar dentro de tu hoja de estilos y mas abajo en la seccion n° 4 te dice como se llama el tipo de fuente, te acuerdas que en el codigo marqué con rojo,  asi que como estamos cambiando la fuente a <p>, <a> y <span> solo a ese codigo le vas a colocar ese nombre.

 

 

 

Quedaría de la siguiente manera, pero recuerda que hasta ahora solo hemos cambiado el texto principal de la pagina web, nos hacen falta los titulos y el input para completarlo son los mismos pasos que seguimos anteriormente.

 Algo muy importante si no tienes plantilla propia el navegador le va a dar prioridad al archivo css que por defecto tiene tu pagina asi que vas a indicar con la palabra !important  lo que estas escribiendo sea mas importante que lo que hay en la hoja de estilos de tu web. Ejemplo:

 

font-family: 'Open Sans', sans-serif !important;

 

Y asi quedaría:

 

 

  <style type="text/css">

<!--

 

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

 

p, a, span { font-family: 'Open Sans', sans-serif !important;

      font-size: 12px !important;

      color: #333333 !important;}

 

h1, h2, h3 {font-family: Arial, sans-serif;

      color: #333333;}

 

h1{ font-size: 26px;}

 

h2{ font-size: 20px;}

 

h3{ font-size: 16px;}

 

input { font-family: Arial, sans-serif;

      font-size: 12px;

       color: #333333;}

 -->

    </style>

 

 

 

 

 Bueno espero les sea de gran ayuda este articulo sus dudas o algun comentario haganmelo saber.

visiten mi canal de youtube, GRACIAS y hasta el proximo articulo.

NOTOYONTOY-YOUTUBE

 

 


Escribir comentario

Comentarios: 0