Cómo añadir web fonts en WordPress

Publicado por Leandro Gómez

El añadir web fonts en WordPress puede darle a su sitio un mayor realce y consistencia en los diferentes navegadores y dispositivos utilizados. Es importante saber cuál es la forma correcta de implementarlas en nuestro sitio o tema.

¿Qué son las web fonts?

En los inicios de la web, se utilizaban las llamadas tipografías web seguras, o web safe fonts. Se trataba básicamente de tipografías que son utilizadas, y están instaladas, en la mayoría de los equipos de los usuarios (cómo Arial, Times New Roman y Verdana).

Las web fonts permiten a los diseñadores utilizar tipografías que no están instaladas en la computadora del usuario. A diferencia de las tipografías web seguras, las web fonts no están instaladas en el sistema del usuario, sino que se descargan al intentar mostrar la página web y después se aplican a su texto.

Existen diversos servicios que alojan y permiten el uso de web fonts. Entre los más populares están Google Web Fonts y Typekit de Adobe.

Si estás editando un tema ajeno, te recomendamos crear un tema hijo para evitar que los cambios se pierdan al actualizarlo.

Añadir tipografías Google Fonts a WordPress

1. Selecciona la tipografía que quieres utilizar en fonts.google.com haciendo clic en el símbolo + que aparece en la esquina superior derecha.

2. Abre el cuadro de tipografías seleccionadas. Personaliza la tipografía según tus requerimientos.

3. Copia el enlace que aparece en la primera pestaña. En este ejemplo:

https://fonts.googleapis.com/css?family=Roboto:400,700

4. Incluye el enlace en la siguiente función en functions.php

function load_google_fonts() {
   wp_register_style('mchto-google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700');
   wp_enqueue_style('mchto-google-fonts');
}
add_action('wp_print_styles', 'load_google_fonts');

5. Ahora puedes utilizar tu nueva web font en tu hoja de estilos. Por ejemplo:

h1 {
   font-family: 'Roboto', sans-serif;
}

Añadir tipografías Typekit a WordPress

1. Ingresa a typekit.com y selecciona la tipografía que quieras utilizar.

2. Haz clic en el botón Web use: Add to kit.

3. Puedes añadir la tipografía a un kit existente o crear uno nuevo.

4. Selecciona los pesos y estilos de tipografía que vas a utilizar y publica los cambios.

5. Busca el embed code y copialo. Vas a necesitar tu ID DE KIT que está compuesto por las letras y/o números que aparecen como nombre del archivo js en el enlace. Por ejemplo:

https://use.typekit.net/abc1234.js

6. Incluye el ID DE KIT en la siguiente función en functions.php.

wp_enqueue_script( 'mchto-typekit-fonts', '//use.typekit.net/ID_DE_KIT.js');
  
function mchto_typekit_inline() {
   if ( wp_script_is( 'mchto-typekit-fonts', 'done' ) ) { ?>
      <script type="text/javascript">try{Typekit.load();}catch(e){}
<?php }
}
add_action( 'wp_head', 'mchto_typekit_inline' );

7. Ahora puedes utilizar tu nueva web font en tu hoja de estilos. Por ejemplo:

h1 {
   font-family: 'Fira Sans', sans-serif;
}