Cuando hablamos de diseño de un sitio web, uno de los aspectos, que más suele destacar, es el tipo de letra. Si estás leyendo este artículo es porque o bien estás cansado de la tipografía de tu web o bien estás buscando cambiar de aires.
Tanto WordPress, como la plantilla o theme que estés utilizando, tienen unas fuentes, tipografías o tipos de letras predefinidas. Ahora bien, eso no quita que no puedas personalizar el tipo de letra a tu gusto.
Y eso es el propósito, precisamente, de este artículo: un paso a paso para que aprendas qué son las tipografías y cómo puedes personalizarlas aunque no tengas ni idea de código.
Cambiar la tipografía en WordPress sin plugins utilizando tus propias fuentes
Una muy buena opción para personalizar tu sitio web en WordPress consiste en personalizar el tipo de letra que utilizas. Muchos temas permiten hacerlo, pero siempre limitado un listado de fuentes.
Si lo que necesitas es poder utilizar tu propio tipo de letra corporativo o específicamente una fuente en particular, siguiendo estos pasos podrás hacerlo fácilmente.
Paso 1. Obtener la fuente que deseas
Existen numerosos sitios donde poder descargar fuentes. Pero antes tienes que saber lo siguiente:
- No todas las fuentes son gratuitas.
- Las fuentes, sean gratuitas o no tienen derechos de autor.
- Algunas fuentes cuestan mucho dinero.
Teniendo en cuenta esto, aquí te dejo algunos servidores donde puedes encontrar fuentes para descargarlas:
- Google Fonts. Las propias fuentes que Google pone a tu disposición.
- Fonts.com. Quizás uno de los más conocidos.
- Dafont.com. Otro de los marketplaces más conocidos.
Paso 2. Convertir la fuente adquirida
Una vez tengas el archivo de tu fuente, tienes que convertirla a todos los formatos posibles.
Te recomiendo que utilices la herramienta Webfont Generator para convertir la tipografía.
Aquí, basta con añadir la fuente, seleccionar OPTIMAL, Yes agree y os aparece el botón de Download Your Kit.
Al pulsarlo, nos descarga un zip con unos cuantos ficheros.
De ellos, nos interesan: .eot .svg .ttf .woff. Estos cuatro son lo que subiremos a nuestro hosting. (ver explicación de WOFF al final del artículo).
El Web Open Font Format (WOFF) es un contenedor de formatos de tipos de letra para utilizarse en páginas web. Su objetivo es permitir la distribución de tipografías desde un servidor a un equipo cliente conectado en red.
WOFF permite contener tipografías TrueType y OpenType de manera comprimida. Su compresión es su mayor virtud.
Tiene ya el respaldo de W3C y también el soporte de Firefox (Fundación Mozilla).
Además tenemos un fichero .html donde podemos comprobar que se ha generado correctamente nuestra fuente, y un fichero .css que contendrá el código css (@font-face) a incluir en nuestra web.
Pero vayamos por pasos.
Paso 3. Subir archivos de las fuentes
Una vez tenemos el .zip descargado, lo descomprimimos y mediante FTP subimos los cuatro ficheros eot, svg, ttf y woff al directorio de fuentes de nuestro WordPress. ¿Cuál es ese directorio? Pues bien, normalmente será algo como: …wp-content/themes/yourtheme/fonts donde yourtheme será el nombre del tema que estás utilizando.
@font-face {
font-family: 'segoe_printbold';
src: url('https://www.example.com/wp-content/themes/theme/fonts/fontscore.com_s-segoe-print-bold-webfont.eot');
src: url('https://www.example.com/wp-content/themes/theme/fonts/fontscore.com_s-segoe-print-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.example.com/wp-content/themes/theme/fonts/fontscore.com_s-segoe-print-bold-webfont.woff') format('woff'),
url('https://www.example.com/wp-content/themes/theme/fonts/fontscore.com_s-segoe-print-bold-webfont.ttf') format('truetype'),
url('https://www.example.com/wp-content/themes/theme/fonts/fontscore.com_s-segoe-print-bold-webfont.svg#segoe_printbold') format('svg');
font-weight: normal;
font-style: normal;
}Una vez copiados, abrimos el css y editamos el path de las urls. Es decir, para que no haya problemas, debemos añadir la url completa (http incluido) de nuestra web hasta el directorio fonts. Por ejemplo: https://www.example.com/wp-content/themes/yourtheme/fonts.
Añadimos el css a nuestra web y vamos al último paso.
El último paso toca definir nuestro tipo de letra al nuevo. Aquí dependerá un poco del tema que estéis usando, pero os dejo un par de ejemplos:
#top-menu, #top-menu li {
font-family:'segoe_printbold','Raleway',Arial,sans-serif;
font-size: 20px;}
body {font-family:'segoe_printbold','Raleway',Arial,sans-serif !important;}¿Has personalizado alguna fuente en tus webs? Cuéntanoslo.
