Tutorial: Cómo Cambiar la Fuente de mi Web en Wordpress de Forma Sencilla

  • Autor Autor Canopix
  • Fecha de inicio Fecha de inicio
Canopix

Canopix

Kappa
Verificación en dos pasos activada
Verificado por Whatsapp
Bueno hace mucho que quería cambiar la letra de mi web, el estilo y la fuente. Hace mucho busque la posibilidad por medio de CSS3 de alojar la fuente en mi hosting y de ahí con una técnica de CSS poder aplicarla al estilo de la web, pero el proceso era demasiado engorroso como para explicarlo y para aplicarlo inclusive.

Por lo que me puse a investigar ahora, para hacer un cambio y he encontrado lo que necesitaba: Google Font 🙂 .. Ya se.. un servicio mas de google pero bueno, en este caso me ha ayudado mucho en mi web y ha sido muy rápido.

Los pasos para usarlo:

Ingresar a Google Web Font
Google Web Fonts

GF1_zps2b4d1456.png

Parte Roja-Vista previa de la letra
Parte Naranjas - Filtros para busquedas

Se supone que dentro de todas las Familias de letras que existen en Google Web Font, al menos una nos agrada y la usaremos (En caso contrario, por favor ya deje de leer este tutorial o adaptese a una de las disponibles).

Vamos a elegir alguna de las que estan disponibles, para este ejemplo usaré Signika Negative, apretamos en la opcion Quick Use que esta debajo de la vista previa a la derecha.



En esta opcion, saltaremos a otra web donde claramente nos dan los pasos a seguir para usar la Fuente pero se los explicare.

En el primer paso, elegiremos una de las opciones de letra que existe:

gf250_zps888c9b2e.png


En este caso, eligen una de las opciones.
A la derecha tienen un medidor de carga en la pagina con respecto a la letra, si es muy pesada o no.

El paso 2, lo dejamos como esta.

El paso 3, es algo como esto:
gf450_zpsf3d57734.png


Esto es lo importante, Este codigo lo agregamos en el HEADER.PHP de nuestra plantilla. Si tu plantilla es un "child-theme" deberas ir a la plantilla madre y agregarlo..

Recordar que este codigo se pone en el header.php antes de la etiqueda </head>


Este es el paso fundamental 🙂

Ahora lo siguiente es esto:

gf550_zps790da601.png


Para agregar esto, deberemos identificar el CSS que rige en nuestra plantilla por lo general es Style.css pero es mejor verificar con el Inspeccionar Elemento de Chrome o Firebug de Firefox.

Identifican que elemento quieren cambiar, por ejemplo los titulos H1, que ya tienen una fuente definida como

Insertar CODE, HTML o PHP:
h1{
font-family: 'Helvetica"; (codigo hipotetico)

}

Aca cambiamos la parte correspondiente por lo que aparece en Google Web Font.


Espero que les halla gustado, 🙂 Un saludo muy grande y cualquier error o consulta diganlo 🙂
Final un poco apresurado porque me tengo que ir! jajaj
 
Última edición:
Tema aprobado y agregado al listado de tutoriales, buen aporte.
 
Encontré este tema perdido... aún funciona?? ni con el plugins easy google fonts he podido cambiarle la fuente.
 
Gracias, me servira bastante 🙂
 
Atrás
Arriba