marzo 01, 2018| | en Tutoriales Wordpress
Como agregar google fonts a WordPress.
Quizás tengamos la necesidad de agregar nuestra propia fuente. Deseamos darle un estilo determinado a nuestra pagina web o tal vez estamos creando un theme wordpress desde cero.En cualquier caso, si tenemos la intención de agregar google fonts en esta guía te mostramos como hacerlo. Primero aprenderas como agregar google fonts sin utilizar plugins y posteriomente cuales son los plugin mejor valorados para agregar fuentes de google a nuestro sitio.
Por que utilizar fuentes de google en nuestro sitio.
Antes de explicar cómo agregar fuentes de google a nuestro WordPress, nos responderemos por que usar google fonts. Además de comentar que las fuentes son gratis y brindan una interesante experiencia de usuario. También debemos conocer algo referido a la velocidad de carga del sitio.
Si la fuente que utilizamos en nuestra web está alojada en el cache del navegor del usuario (porque antes visito un sitio que tenia dicha fuente) nuestra página web se cargara algo más rápido. Tenemos unas 800 fuentes para seleccionar con distintos estilos y formas.
¿Cómo agregar Google Fonts a WordPress sin plugin?
Si ya tenemos muchos plugins instalados en nuestro WordPress seguramente será buena idea aprender como agregar las fuentes de google
sin recargar nuestra web con plugins. Para agregar estas fuentes a nuestro sitio debemos realizar los siguientes paso.
1 ) Dirigirnos a google fonts
En el sitio de fuentes de Google recuerda que dispones de un poco mas de 800 fuentes y puedes navegar por las distintas categorías que ofrece google fonts (Serif, Sans Serif, Display, HandWriting, Monospace). Encontraras también las fuentes más populares y las agregadas recientemente entre algunas de las muchas opciones que ofrece el servicio de google.
2) Elegir la fuente .
Cuando estemos convencidos de que fuente seleccionar , en mi caso elegiré la fuente Montserrat ya que la utilizare para los títulos de la web,
hacemos click en el símbolo + que se encuentra a la derecha de la fuente. Observaremos que nuestra google fonts aparece en un menú inferior en el
centro de la pantalla.
Al clikear se desplegara un cuadro con los detalles de la fuente, su url y el nombre de la familia de dicha fuente para agregar a nuestro archivo css. En customize podremos seleccionar el grosor de la fuente y en nuestro caso optare por regular 400 y bold 700. Vemos entonces como este servicio de google nos permite personalizar nuestra fuente de diferentes maneras.
Un punto a considerar es el tiempo que demora en cargarse la fuente, ya que mientras mas estilos seleccionemos mas demorara en cargarse en el navegador del usuario. Arriba a la derecha aparecerá un cuadro que nos muestra el tiempo de carga de la fuente.
3) Embeber o agregar la nueva fuente a nuestro sitio wordpress.
Si bien tenemos diferentes formas de agregar la google fonts a nuestro sitio wordpress, todas empiezan copiando la url de la nueva fuente desde la interfaz de google fonts.
A partir de este punto podríamos agregar la nueva fuente de google desde el archivo style.css, desde el html de nuestro sitio o con la manera recomendada utilizando las funciones de WordPress.
- 3.1) Usando la función wp_enqueue_style de WordPress.
Abrimos nuestro archivo funtions.php, que se encuentra en la raíz de nuestro theme y vamos a suponer que el sitio no carga ninguna fuente. Ahora para agregar la nueva google fonts pegamos el siguiente código:
function agregar_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Lato:300,400,400i', false );
}
add_action( 'wp_enqueue_scripts', ' agregar_google_fonts);
Luego debemos utilizar la nueva fuente desde el archivo style.css, en este caso utilizando la regla css font-family: nombre de nuestra fuente.
En nuestro caso incorporamos este codigo al archivo style.css
.entry-title {
font-family: Montserrat;
font-weight: bold 700;
}
- 3.2) Incorporando google fonts al archivo style.css
En este caso podemos utilizar la regla @import, que tambien nos suministra la propia interface de google fonts. Debemos pegar el siguiente codigo al comienzo del archivo style.css:@import url('https://fonts.googleapis.com/css?family=Montserrat')Naturalmente, luego utilizaremos a la fuente con la regla font-family para incorporarla a nuestros titulos.
- 3.3) Incorporando google fonts al html de WordPress.Esta es la forma menos recomendada de hacerlo, pero también funciona. Debemos incorporar el siguiente codigo al archivo header.php.
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
La forma correcta de agregar google fonts a nuestro wordpress es a traves de la funcion wp_enqueue_style()
Agregando las fuentes de google con plugins
Si el còdigo no es lo nuestro y no queremos tocar el archivo funtios.php, todavia tenemos la opcion de agregar un plugin.Podemos utilizar el plugin Easy Google Fonts el cual nos suministrara una gran catidad de opciones.
Luego de instalar el plugin, en el personalizador del theme nos aparecera una nueva opción denominada Typography. Para accedera ella debemos ir a Apariencia –>Perzonalizar.
Con todas las nuevas opciones que nos ofrece el plugin Easy Google Fonts podemos controlas las fuentes de todo el sitio. Podemos colocar una google fonts a los h1 y otra fuente distinta a los parrafos. Si abusamos del plugin, naturalmente podremos afectar la carga del sitio.El plugin nos permite aplicar estilos css tambien, como por ejemplo mostrar los titulos en mayusculas, con algun color y hasta con estilos complejos.
Con Easy Google Fonts no tenemos escusa para no utilizar las fuentes de google en nuestro sitio. Como casi todo en WordPress, facil de utilizar y facil de modificar.
Agregar google fonts ya no es tan dificil
Si en el pasado agregar fuentes personalizadas a su sitio web era un trastorno, teniendo que agregar complejos archivos de fuentes. Hoy en dia gracias a servicios como google fonts puedes personalizar los títulos y los parrafos de tu sitio web en cuestion de minutos. Ya no tienes escusa, deja de utilizar aburridas tipografias y deja volar tu creatividad con google fonts. ¿Conoces alguna otra forma de agregar fuentes de google a tu sitio WordPress?. Esperamos saber de ti en nuestros comentarios.