En esta entrada veremos cómo añadir fuentes personalizadas en WordPress. Una vez que hayas encontrado las fuentes que deseas utilizar en tu sitio web, es necesario instalarlas. Si aún no has encontrado la fuente adecuada para tu sitio, intenta con los siguientes 6 proveedores de fuentes personalizadas – todos de uso libre:
Existen diferentes formas de añadir fuentes personalizadas, dependiendo del tema o plantilla instalada en tu sitio web, y del «source» u origen de esas fuentes.
Puedes añadir fuentes personalizadas en WordPress vía:
- Plugins: utilizando plugins que permiten la carga de fuentes
- Métodos manuales: a través de la inserción de códigos
Plugins que permiten la carga de fuentes
A continuación una lista de los mejores plugins que puedes elegir para instalar fuentes personalizadas en tu sitio web en WordPress:
- Typekit Fonts for WordPress: Un plugin que te permite utilizar «Typekit fonts»
- WP Google Fonts: Es el plugin más popular para añadir «Google’s webfonts» a WordPress
- Web Fonts: Ofrece soporte para el uso fuentes web de «Fonts.com»
- WordPress Font Uploader: Te
permitepermitía subir cualquier tipo de archivo de fuentes (.ttf y otf) y lasañadeañadía a tu sitio utilizando la regla CSS: @font-face
Instalación de Google Fonts manualmente
Existen diferentes formas de instalar fuentes personalizadas de Google Fonts manualmente:
- Estándar: Este método es el mejor para el rendimiento de tu sitio y debe ser añadido a la sección del encabezado en el archivo «header.php» de tu plantilla o tema
- @import: Este es el método utilizado por StudioPress en sus temas o plantillas compatibles con Genesis Framework
- Javascript
Si vas a instalar fuentes web de Google, no necesitas subir los archivos a tu servidor. Lo que necesitas hacer es añadir a tu sitio una solicitud «http» de importación hacia los servidores web de Google. Para hacer esto, sólo tienes que añadir el siguiente código al principio del archivo «style.css» de tu plantilla o tema:
Cambia el nombre de la fuente por el de tu elección, visita: Google Web Fonts. Inclusive puedes añadir varias fuentes al mismo tiempo. Una vez que hayas importado las fuentes en tu misma hoja de estilos «style.css» específica qué elementos utilizarán la fuente importada, por ejemplo:
Instalación de fuentes personalizadas manualmente
Para instalar fuentes personalizadas de forma manual te recomendamos utilizar: «Font Squirrel«, ya que tiene un excelente generador para crear el código y cumplir esta tarea. Este es un ejemplo de cómo lucirá el código CSS una vez que cargues y conviertas los archivos de fuentes con el generador de Font Squirrel:
De esta forma podrás utilizar distintos tipos de fuentes personalizadas en elementos específicos de tu sitio web en WordPress 🙂
Hola! Yo estaba acostumbrado a usar google fonts pero tenía una tipografía que ellos no tenian y gracias a ti y al WordPress Font Uploader pude instalarla. Muchas Gracias! Me salvaste el día.
Me da gusto que la información haya sido de ayuda, un saludo @carlos 🙂
Una sola palabra: EXCELENTE!!!
Por cierto, efectivamente.. WordPress Font Uploader es lo mejor que puede haber!!
Un saludo Estella.
Y gracias.
Si @LuisLY «WordPress Font Uploader» es ideal para cada proyecto, su desarrollador «Pippin Williamson» tiene otros plugins muy interesantes, seguro te gustarán un saludo 😉
No sabia que existía el plugin WP Font Uploader, gracias por la información.
Un placer @Francisco éxito en tu proyecto 🙂
Hola Estella como podría agregarle + fuentes al plugin TinyMCE Advanced ya las q trae por defecto son muy comunes ?. Saludos
Hola @Robert,
Nunca he utilizado «TinyMCE Advanced», pero te sugiero echar un vistazo a la siguiente publicación del foro oficial donde hacen mención de los ajustes necesarios para añadir otras fuentes: TinyMCE Advanced: How to add custom fonts to «font family» list.
Saludos!
Hola Estella!
Gracias por tu articulo, era lo que necesitaba. pero por desgracia parece que el plugin WordPress Font Uploader ya no está disponible en el repositorio de plugins (el link del post ya no funciona, y al usar el buscador en WP tampoco lo he encontrado).
Conoces alguna alternativa que sea gratis y así de facil como parecía ser este plugin extinto?
Muchas gracias por tu respuesta,
Javier
Hola @Javi,
Es correcto Pippin Williamson ha cerrado el proyecto «WordPress Font Uploader«, si aún deseas utilizar el plugin puedes descargarlo desde «https://www.dropbox.com/s/d0hqokj43hmufyr/font-uploader-v2.2.zip«, otra alternativa que puede ser de tu interés es el plugin «Use Any Font«.
Un saludo!
Hola Estella,
Muchisimas gracias por tu respuesta!!
Había intentado usar Use Any Font, pero ya no es gratuito (me pedían una contribución ¨voluntaria¨ mínima de 10 dólares), pero he podido usar el que me has pasado por dropbox y funciona a la perfección (solo necesitaba instalar una fuente).
Gracias de nuevo por tu ayuda,
Javier
Genial @Javi, éxito en tu proyecto!
Hola me gustaría saber cómo puedo hacer para aplicar a toda la web que he hecho en WordPress el tipo de letra roboto. en el css puse:
@import «http://fonts.googleapis.com/css?family=roboto»; pero sólo lo importé y no sé como aplicarlo a todo el documento
Gracias 🙂
Hola @Manuel,
Sólo te falta señalar que elementos del texto usarán la fuente de tu elección. Añade la siguiente regla a tu hoja de estilos para usar «roboto» como fuente principal:
O bien, una regla para usar la fuente sólo en títulos:
Un saludo!
Hola Estella:
Me gustaría que me ayudaras a desheredar h1 de body para colocar otra fuente distinta
uppsss se me ha ido el dedo. Por lo menos queria dar las gracias y un saludo
Perdón de nuevo.
Supongo que al ser un texto con enlace quizás haya que tocar tambien h a… No se ando pelin perdido. Llevo horas y horas y no doy con la tecla.
Muchas gracias de antemano
Un saludo
Un saludo