Tiempo de lectura aprox: 4 minutos, 59 segundos
La tipografía 2 es la segunda parte de un artículo anterior en el que comento que la tipografía de tu sitio web es un elemento muy importante.
Ahora te voy a contar cómo puedes decidir la tipografía de tu página web, aunque escojas un tema que, en principio, no te permite cambiarla.
Antes, un breve repaso:
la tipografía 2
La tipografía será uno de los factores que determinen la primera impresión que se llevarán nuestros visitantes, ya que repercute en el diseño, crea identidad, proporciona vistosidad y acerca la información al usuario.
La letra es un elemento clave y, según como se presente, puede cambiar su significado, ya que cada tipo de letra, forma o color representa un estilo y lenguaje diferentes.
Así que veamos que podemos hacer para cambiar el tipo de letra que ven los visitantes de tu pagina web
Normalmente cuando se diseña un tema, se tiene cuidado de escoger un tipo de letra acorde con el aspecto que quiere darse a la totalidad del sitio.
En esa elección suele haber dos o quizá tres tipos de letra, mezclar más tipos no suele ser buena idea, la presentación se hace farragosa. Por tanto, se suele escoger un tipo de letra o «fuente» para los párrafos normales, y un tipo distinto para las cabeceras. En algunos casos, un tercer tipo para el nombre del sitio.
El modelo
Para hacer nuestro modelo, vamos a escoger dos tipos de fuentes:
Una fuente que resulte legible, pero que nos represente. Será la fuente «Helvetica».
Para los encabezados, una fuente que resalte, pero que no destaque demasiado. Será la fuente «FreeSansBold» (De esta manera, no hay que preocuparse de aumentar la intensidad – poner en «negrita»).
Una imagen de ejemplo:
Para que nuestro sitio tenga esta apariencia, tenemos varias opciones. Como siempre, la primera y más fácil, es instalar un plugin que nos permita seleccionar la fuente, independiente del tema elegido.
Existen varios plugin para este cometido y, sin hacer recomendación alguna, te presento unos cuantos:
- Use Any Font
Es fácil e intuitivo, aunque la «desventaja» es que debes tener las fuentes en tu propio servidor. (https://es.wordpress.org/plugins/use-any-font/) - WP Google Fonts
Te permite fácilmente descargar fuentes desde el repositorio de fuentes de Google. (https://es.wordpress.org/plugins/wp-google-fonts/) - FontMeister – The Font Management Plugin
Este plugin te permite fácilmente descargar fuentes desde el repositorio de fuentes de tres proveedores distintos: Google Web Fonts, Typekit, y Font Squirrel. (https://es.wordpress.org/plugins/fontmeister/)
Un poco más avanzado
Para los que se atreven con un poco de código, existe una opción más avanzada, se trata de actualizar el archivo style.css.
Modificar el archivo style.css de un tema que hemos adquirido, está permitido, pero no es la opción más «inteligente», es mejor crear un «tema hijo» y modificar nuestro propio archivo.
Para modificar la fuente, tenemos dos opciones, dependiendo de la disponibilidad de los archivos de fuentes, pero independiente de su formato (sean ttf o, woff o, otf por citar algunos).
Si disponemos del archivo de fuente en nuestro servidor, debemos editar el archivo style.css y, en las primeras líneas, insertar la orden de carga. Por ejemplo:
@font-face {
font-family: 'Helvetica';
src: url('Helvetica-Regular.woff');
}
@font-face {
font-family: 'FreeSansBold';
src: url('FreeSansSemiBold.woff');
}
Más adelante, podemos definir dónde se usarán esas fuentes. Por ejemplo:
body {
font-family: Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: FreeSansBold, sans-serif;
}
Cuando se define una fuente para un elemento, mediante la definición CSS de font-family, se ponen normalmente dos o más valores, en este caso: «Helvetica, sans-serif» de forma que si el navegador no puede encontrar la fuente primera, intente representar la siguiente de la lista.
Ahora, si no disponemos de la fuente en un archivo en el servidor, podemos decirle al «CSS» que busque la fuente en un repositorio externo. Por ejemplo:
@import url('https://fonts.googleapis.com/css?family=Helvetica&display=swap');
@import url('https://fonts.googleapis.com/css?family=Free+Sans+Semi+Bold&display=swap');
Y luego usamos la fuente de igual manera que con la anterior
body {
font-family: Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: FreeSansBold, sans-serif;
}
En el caso de la importación que se realiza mediante el mandato «@import url», hay que tener en cuenta que no todos los repositorios tienen todas las fuentes ni siempre todos usan el mismo nombre, así que si quieres asegurarte, visita antes el repositorio, ellos te indicarán cómo debes construir la llamada en el archivo «CSS», según la fuente que elijas.
Ejemplo de los repositorios más usados son:
- Google fonts
Accedes a él en la URL: https://fonts.google.com - Typekit
Producto de Adobe, accedes a él en la URL: https://fonts.adobe.com/ - Fontsquirrel
Un independiente que no envidia nada a los «grandes»; accedes a él en la URL: https://www.fontsquirrel.com/
Una de las razones para crear un «tema hijo», es precisamente que las definiciones «CSS» de nuestro archivo style.css serán tratadas con mayor categoría que las del tema padre, con lo que el cambio que hagamos de fuente prevalece sobre lo que hubiera definido antes.
Si no fuera así, tendríamos que rastrear todo el archivo style.css en busca de los sitios dónde se determinen «font-family» y cambiar uno a uno.
Un paso más
Estas técnicas que hemos mencionado, son válidas no sólo para WordPress sino para cualquier sitio que haga uso de archivos «CSS» para sus páginas.
Pero aún tenemos otros métodos para hacer el cambio de fuentes en WordPress
Son métodos que requieren una mayor intervención, podemos decir que, de mayor complejidad.
El primero, implica cambiar el tema y su comportamiento (al menos ligeramente).
Si tienes un poco de experiencia en creación de páginas web, verás que también es aplicable a otras páginas, no sólo a las de un CMS, pero vamos a ver cómo
Usando el archivo del tema
Todos los temas, están compuestos por partes diferenciadas, por la filosofía de trabajo de WordPress y, eso nos brinda la posibilidad de cambiar una de las partes, sin tocar el resto.
Todas las páginas HTML tienen una sección de cabecera y, la mayoría de los temas, tratan esa sección en un archivo separado llamado header.php.
Dentro de la sección <head> … </head>, podemos insertar el código necesario para cargar las fuentes que necesitemos; usaremos para el ejemplo, el archivo header.php del tema twentynineteen:
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Nineteen
* @since 1.0.0
*/
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<style>
@import url('https://fonts.googleapis.com/css?family=Helvetica&display=swap');
@import url('https://fonts.googleapis.com/css?family=Free+Sans+Semi+Bold&display=swap');
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Al editar el archivo, dentro de la sección <head> … </head>, y antes de la instrucción <?php wp_head(); ?>, insertamos nuestra orden de carga entre las etiquetas <style> … </style>.
Así conseguiremos que las fuentes se carguen cada vez que se abre una página.
Como puede adivinar, este método es válido también si dispones de las fuentes en tu propio servidor, solo que las llamadas @import url( … las cambiamos por @font-face {…
.
Y finalmente, vamos a ver la forma como se debe hacer, según la documentación del WordPress Codex, la forma oficial.
La forma Oficial en WordPress
La forma correcta de incrustar fuentes de forma oficial, consiste en modificar el archivo functions.php (preferiblemente en tu tema hijo) y disponer las fuentes en la fila de fuentes disponibles.
Eso se consigue mediante las funciones wp_enqueue_script o wp_enqueue_style.
Como puedes suponer, la función wp_enqueue_script nos permite añadir un guión Javascript a la cola, mientras que wp_enqueue_style nos permite añadir estilos.
Qué método debes usar, dependerá de qué repositorio uses; por ejemplo, si usas el de Google, deberemos usar la función de estilo, ya que Google Fonts facilita las fuentes de ese modo. Por ejemplo:
function add_google_fonts() {
wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto' );
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
Mientras que el repositorio de Adobe proporciona las fuentes como parte de un script, así que debemos usar por ejemplo:
function add_adobe_fonts() {
wp_enqueue_script( 'adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js' );
}
add_action( 'wp_enqueue_scripts', 'add_adobe_fonts' );
Cualquiera que sea la forma que utilices para descargar las fuentes, luego tendrás que cambiar el archivo style.css para asignar la fuente a su correspondiente elemento.
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!