google-fonts-frontend

Fuentes Google en WordPress con enqueue

Las fuentes del navegador web por defecto son funcionales, pero la adición de fuentes personalizadas a tu sitio de WordPress puede dar a tu tema un nuevo estilo y un aspecto más adecuado a tus necesidades.

Puedes añadir fuentes con la regla de estilo @font-face pero este método requiere que subas los ficheros a tu servidor, con el correspondiente espacio que ocupan.



En este post vamos a ver cómo podemos hacer uso de las fuentes de Google, de una manera sencilla.

Para ello crearemos una función para poder añadir las tipografías que nos gusten y que más vayan con el estilo de nuestra web.

Vamos a ello

Escogiendo la tipografía

En primer lugar debes acceder a la biblioteca de fuentes de Google.

Escoger la fuente o fuentes que nos gusten, en este ejemplo haremos uso de dos tipografías.

Indie Flower y Yanone Kaffeesatz

google-fonts-collection

Ahora que ya tenemos nuestras tipos escogidas, le damos al botón de Use.

google-fonts-use

El dial a la derecha indicará lo rápido que la página se carga con las fuentes seleccionadas. Es importante no excederse de la franja verde, cuanto más baja, más rápido se cargará el sitio.

A continuación, desplázate hacia abajo y elige, si necesitas, los juegos de caracteres adicionales, para la visualización de símbolos especiales, haciendo clic en sus correspondientes casillas de verificación.

Si sólo necesitas caracteres ingleses, entonces puedes saltarte este paso, ya que se incluyen de forma predeterminada.

Por último, observa el enlace que aparece en el cuadro que aparece en el paso tres. En concreto, presta atención a la parte del enlace que incluye los nombres de fuentes, pesos y subconjuntos.

En este ejemplo, es el segmento Indie+Flower|Yanone+Kaffeesatz.

Debajo de esta sección también verás una muestra de CSS sugerido para dar estilo a tus fuentes. Necesitarás este código en un momento para añadir las fuentes a tu tema.

El siguiente paso es editar el archivo functions.php, ubicada en la carpeta de tu tema: wp-content> temas> el-tema.

En este ejemplo estamos haciendo uso de un tema hijo del tema Twenty Fifteen.

Añade el siguiente código:

function fuentes_google() {
wp_register_style('GoogleFonts', 'http://fonts.googleapis.com/css?family=Indie+Flower|Yanone+Kaffeesatz');
wp_enqueue_style( 'GoogleFonts');
}
add_action('wp_print_styles', 'fuentes_google');

Una vez que hayas terminado, edita el archivo style.css. Busca donde deseas usar el tipo de letra y escribe el código que te proporciona Google. En este ejemplo vamos a personalizar los encabezados h1 y h2.

.entry-content h1 {font-family: 'Indie Flower', cursive;}
.entry-content h2 {font-family: 'Yanone Kaffeesatz', sans-serif;}

Ahora vamos a editar una entrada y vamos a crear dos encabezados para ilustrar el ejemplo.

google-fonts-backend

Actualiza la página y listo, ya podrás ver las tipografías seleccionadas.

google-fonts-frontend

Recuerda que puedes personalizar, incluso más, tus fuentes añadiendo más estilos como por ejemplo:

font-weight:700;
font-style:oblique;
font-size: 14px;
color: #3c3c3c;
}

Si prefieres ahorrar tiempo y utilizar un plugin para añadir fuentes a tu sitio, hay muchos para elegir en el directorio de plugins de WordPress.

Fuente: WPMudev

¿Cuáles son tus fuentes favoritas de Google? ¿Las has añadido a tu sitio?

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *