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.
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.
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.
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.
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.
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.
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; }
@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.
<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()
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.
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.