¿Tienes un sitio web construido en WordPress y no sabes cómo instalar tipos de letra personalizadas? ¿Has notado que el tipo de letras disponibles no te gustan? ¡Utilizar fuentes personalizadas y diferentes a las que vienen por defecto es más fácil de lo que crees! Aquí te dejamos dos formas de hacerlo:
01. PLUGINS
Use Any Font
Este plugin te permite subir las fuentes directamente desde la computadora y admite los formatos: ttf, otf, eot, woff, svg, dfont y suit. Funciona con los navegadores principales, como Edge, Firefox, Chrome, Safari, Opera y otros. El tiempo de carga de las fuentes es bueno, ya que se alojan directamente en tu sitio.
Easy Google Fonts
Este plugin carga las fuentes direcamente desde la base de datos de Google Fonts. Esto significa que:
- No importa que la fuente esté en tu ordenador, necesariamente debe estar en el repositorio de Google Fonts para poder cargarla.
- Tiene 915 tipos de fuente en su base de datos.
- Tiene un sistema que te permite sugerir fuentes similares en el caso de que la que necesites no la tengan disponible.
- Las fuentes cargarán desde el servidor de Google, por lo que no ocuparán sitio en tu servidor.
- No tendrás problemas de incompatibilidad entre navegadores.
WP Google Fonts
Este plugin te permite agregar fuentes desde el repositorio de Google Fonts con una limitación de hasta 6 por página. Esto se debe a que un exceso de fuentes puede ralentizar tu página, a demás de hacerla ver mal.
02. Insertar con CSS
Si tenemos la fuente instalada en nuestro ordenador o descargada en nuestros archivos, podemos subirla al servidor via FTP y después vincularla con CSS. Hay que tomar en cuenta que tendremos que hacer uso de una herramienta que nos convierta nuestro archivo a todos los formatos de fuentes compatibles para que todos los navegadores puedan leerla.
Esto puedes hacerlo desde: “Generator” de Font Squirrel.
- Ahora subimos la fuente vía FTP con todas sus extensiones a un directorio ya existente o creamos uno, por ejemplo, una carpeta llamada “fuentes” en la raíz de la instalación de WordPress.
- Editamos la hoja de estilos de nuestro tema activo:
| @font-face { //Nombre por el que llamaremos a la fuente font-family: ‘tufuente’; //Referencia de todo los formatos src: url(‘/fuentes/tufuente.eot’); src: url(‘/fuentes/tufuente.eot?#iefix’) format(’embedded-opentype’), url(‘/fuentes/tufuente.woff2’) format(‘woff2’), url(‘/fuentes/tufuente.woff’) format(‘woff’), url(‘/fuentes/tufuente.ttf’) format(‘truetype’), url(‘/fuentes/tufuente.svg#tufuente’) format(‘svg’); font-weight: normal; font-style: normal; } |
En este ejemplo, “tufuente” se sustituirá por el nombre de la letra que subas. Los src y url deben ser sustituidos por la ruta donde se hayan subido tus archivos. En nuestro ejemplo, carpeta “fuente” en la raíz de WordPress.
Ahora sólo queda utilizarla. Por ejemplo, si queremos asignarla a los títulos:
| h2, h3, h4{ font-family: ‘tufuente’; } | h |
Y si los títulos ya tuviesen asignada una fuente distinta, o buscamos la línea y la sustituimos, o le añadimos !important para darle prioridad a nuestra modificación:
| h1, h2, h3, h4{ font-family: ‘tufuente’ !important; } |
¡Descarga Fuentes!
Si no sabes en dónde descargar las fuentes que más te gusten, entonces te dejamos una lista de páginas en donde encontrarás fuentes casi ilimitadas y de cualquier estilo:
