¿Cómo puedo integrar las fuentes en WordPress?
Las fuentes son el escaparate de su tema. Si son lo suficientemente atractivos, pueden hacer que su sitio web profesional y optimizar la experiencia del usuario
Sin embargo, si son demasiado «feos», su sitio puede parecer aburrido y tener una mala experiencia de usuario
- Entonces, ¿cómo encontrar buenos tipos de letra?
- ¿Cómo se integran en WordPress?
- ¿Cómo se cambia su color y tamaño en WordPress?
Si alguna vez se ha hecho alguna de estas preguntas, hágalo y continúe leyendo esta miniguía.
¡Empecemos!
Table des matières
Capítulo 1: ¿Por qué utilizar fuentes personalizadas y cómo añadirlas a WordPress?
1.1. ¿Por qué utilizar fuentes personalizadas para su sitio web?
Por defecto, WordPress ofrece temas con fuentes ya incorporadas. Aunque estas fuentes son estupendas y bastante agradables, integrarlas usted mismo con su propio toque personal puede tener bastantes beneficios para el sitio
He aquí algunas de ellas:
- Puede personalizar el tema a su gusto
Si no está realmente enamorado del tema básico de su sitio, tiene la posibilidad de personalizar sus fuentes usted mismo y conseguir un tema que le convenga más
- Usted se distingue de la competencia
La personalización de las fuentes hace que su diseño se diferencie del de sus competidores, que se quedan con las fuentes predeterminadas de WordPress
Muchos propietarios de sitios de WordPress se conforman con las fuentes y el diseño por defecto que les ofrece el CMS
Esto en sí mismo no es algo malo. Sin embargo, si quiere diferenciar su sitio del de sus posibles competidores, personalizar las fuentes de su tema es la mejor manera de hacerlo.
- El diseño de su sitio web mejorará
Si elige las fuentes adecuadas, el diseño general de su sitio web recibirá un lavado de cara, lo que supone un gran paso para optimizar la experiencia del usuario
Está claro que la mayoría de los visitantes disfrutarán pasando el tiempo en un sitio optimizado con una apariencia cautivadora. No es el caso de un sitio con fuentes y un tema general del que se cansan.
Ahora bien, ¿cómo se integran estas fuentes personalizadas en un sitio de WordPress? Esto es lo que veremos en la siguiente sección.
1.2 ¿Cómo puedo añadir fuentes personalizadas a un sitio de WordPress?
Aquí, le mostraré 3 métodos para personalizar sus fuentes en WordPress. Puede elegir entre:
- Utilice fuentes web;
- Añadir fuentes manualmente
- Alojar las fuentes en su sitio.
Es importante señalar que estos no son los únicos métodos para personalizar sus fuentes. Hay otros, pero he optado por mostrarle los más populares y de fácil acceso
Veamos cómo funciona cada una de estas opciones
1.2.1. Fuentes web
El uso de fuentes web es el método más común para añadir fuentes a un sitio web. Existe una amplia gama que puede utilizar para personalizar el aspecto de su sitio
En primer lugar, pasemos a una explicación del término:
1.2.1.1. ¿Qué es una fuente web?
Las fuentes web son fuentes alojadas por un proveedor externo. Es decir, se almacenan en el sitio web del proveedor. Para acceder a ellos, no es necesario descargarlos
Todo lo que tiene que hacer es codificar un enlace al sitio del proveedor para recuperar las fuentes y utilizarlas directamente en su sitio. También puede utilizar una extensión para ahorrarse el trabajo de codificación
Sin embargo, es muy importante no confundir fuentes web con fuentes seguras para la web. Las fuentes seguras para la web existen como plan de respaldo. Sólo se muestran cuando el visitante del sitio no puede conectarse a la fuente que ha definido para su sitio.
Esto puede deberse a que el servidor del proveedor es inalcanzable o a que el navegador del visitante está anticuado y no admite la fuente personalizada
1.2.1.2. ¿Por qué utilizar una fuente web?
La ventaja de utilizar fuentes web es que tiene acceso a una multitud de fuentes sin tener que alojarlos necesariamente en su sitio o localmente en su ordenador
Ahorrará mucho más tiempo creando unas pocas líneas de código o instalando una extensión en lugar de descargar y luego subir archivos de fuentes
Es más, cuando el proveedor en cuestión necesite realizar actualizaciones en su gama de fuentes, usted tendrá acceso inmediato a las versiones actualizadas de los archivos de fuentes que haya seleccionado
Bastante flexible, ¿no?
1.2.1.3. ¿Dónde encontrar fuentes web?
La mayoría de los proveedores más populares funcionan sin necesidad de una suscripción. Sin embargo, las fuentes pueden ser de pago o gratuitas, según el proveedor
Los proveedores más populares son :
Google Fonts es el principal proveedor de fuentes web. Ofrece una amplia gama de fuentes web gratuitas
También puede guardar las fuentes en su ordenador y utilizarlas después para sus documentos sin conexión, de forma totalmente gratuita.
Para añadir fuentes web a su sitio de WordPress desde Google Fonts, una de las formas más sencillas es utilizar el Google Fonts fácil
Simplemente descargue el plugin e inserte las fuentes de la «familia de fuentes» de Google Fonts en la pestaña de tipografía del panel de control de «Apariencia» y «Personalización» de su WordPress.
Una vez hecho esto, haga clic en «Guardar y publicar» para activar los cambios.
Si busca fuentes de alta gama, Fonts.com es la mejor opción para usted. Este proveedor de pago le proporciona fuentes de gran calidad
Adobe Typekit requiere un poco más de reserva que Google Fonts. Es un mercado para los tipógrafos profesionales, pero también hay algo para los aficionados
Adobe Typekit también ofrece un gran número de fuentes gratuitas para aquellos que no quieran invertir y acceder a las opciones premium. El acceso a esta base de fuentes sólo requiere un registro.
Para utilizar Adobe Typekit, vaya a la barra de búsqueda de la interfaz de inicio y busque «kits»
En la siguiente pantalla, seleccione la opción «Crear un nuevo kit». Se le pedirá que introduzca el nombre de dominio de su sitio como entrada para la siguiente fase
A continuación, se le proporcionará un javascript que deberá guardar en una pequeña nota de texto en su ordenador.
Su kit ya está listo. A partir de ese momento, podrá navegar por la colección de Adobe Typekit y añadir las fuentes que desee a su kit. La siguiente parte es la codificación en la interfaz de su sitio de WordPress
¿Recuerda el fragmento de javascript que le pedí que guardara?
Ahora es el momento de pegarlo en el archivo header.php de su tema en las pestañas Apariencia y Editor
A continuación, haga clic en «Actualizar archivo» y ya está. Podrá añadir otras fuentes de Adobe Typekit modificando su hoja de estilos.
Como se ha mencionado anteriormente, hay muchos proveedores de fuentes, sólo hemos visto los más populares
Con todos estos proveedores, puede integrar directamente las fuentes en sus publicaciones creando líneas de código o utilizando una extensión que instale en su sitio de WordPress
Además, es bueno recordar que proveedores como Google fonts le ofrecen la posibilidad de previsualizar el resultado que obtendrá después de haber optado definitivamente por una determinada fuente.
1.2.2. Añadir fuentes manualmente
La segunda opción que sugiero para personalizar las fuentes en su sitio de WordPress es añadirlas manualmente a su sitio
Pueden ser fuentes web o fuentes que usted aloje localmente en su ordenador.
Para añadir manualmente fuentes web a su sitio, tendrá que crear líneas de código para su hoja de funciones y su hoja de estilo
Si está utilizando un tema personalizado, la modificación de la hoja de funciones y la hoja de estilos no le causará ningún problema
Sin embargo, si está utilizando un tema de WordPress, tendrá que volver a crear su tema
Así que veamos los pasos para añadir manualmente las fuentes web:
- Seleccione un tipo de letra
En primer lugar, tiene que seleccionar una fuente de su elección y recuperar su enlace.
- Incrustar el enlace de la fuente elegida
El segundo paso es integrar el enlace copiado en la hoja de funciones de su tema. Para ello, debe sustituir el enlace de la fuente existente en el archivo de funciones por el generado por el proveedor y copiado inicialmente
Ahora ha puesto en cola su fuente. No funcionará inmediatamente. Tiene que pasar al siguiente paso.
- Añadir la fuente a la hoja de estilo
Para que la fuente funcione en su sitio, debe añadirla a la hoja de estilos de su sitio
Para ello, añada el código para aplicar las fuentes a su archivo style.css y seleccione el elemento al que desea aplicar el estilo (el cuerpo del texto o las cabezas).
Finalmente, guarde la hoja de estilos modificada y compruebe que sus cambios funcionan en el sitio
Si todo esto le parece complejo, aquí tiene un vídeo
Sin embargo, también es una buena idea añadir un fuente de emergencia o fuente segura para la web en caso de que uno de los visitantes de su sitio no pueda acceder a la fuente que ha aplicado
De ahí la importancia de contar con un sitio optimizado, bien diseñado y apto para móviles. A continuación le mostraré cómo descargar y convertir los archivos de fuentes.
1.2.3. Alojar fuentes en su blog
Otra forma es alojar las fuentes en el servidor de su sitio. Una de las ventajas de este método es que tiene el monopolio de la seguridad de su sitio no hay enlaces a terceros.
Las fuentes que se alojan son fuentes web disponibles para su descarga en los sitios de los proveedores. Aun así, debe comprobar si la licencia del sitio del proveedor se lo permite
También puede alojar las fuentes localmente, subirlas a su sitio e insertarlas en su hoja de estilos sin ponerlas en cola en su archivo de funciones.
En concreto, esto significa
- En primer lugar, descargue las fuentes de su elección de un sitio de proveedores. Para poder utilizar estos archivos de fuentes en su sitio web, asegúrese de que están en el formato woff. Si es necesario, puede utilizar un convertidor de formatos para hacerlos utilizables. Volveremos a hablar de esto con más detalle en el próximo capítulo
- A continuación, tendrá que subir todos los archivos de fuentes descargados a la carpeta de su tema. Seguiría siendo más sensato y táctico crear una subcarpeta llamada »fuentes» en su carpeta de temas donde se encontrarán todos sus archivos de fuentes. Este es un punto más en la personalización y optimización de su sitio de WordPress
- Por último, sólo tendrá que integrar las fuentes en su hoja de estilos siguiendo el mismo proceso y ver cómo su sitio cambia subliminalmente de aspecto.
Ahora que hemos explorado estas diversas opciones para personalizar sus fuentes, compartiré con usted cómo convertir sus archivos de fuentes
Para incrustar manualmente las fuentes en su sitio de WordPress, debe necesariamente descargarlas primero y subirlas a su sitio. También debe asegurarse de que estos archivos están en el formato correcto
Para ello:
- Comience por visitar el sitio del proveedor que ha elegido
- A continuación, seleccione el tipo de letra que le convenga
- Vaya a la sección «Licencia y uso» del sitio para ver si está autorizado a descargar y utilizar el archivo de fuentes
- Haga clic en la pestaña «descargar» y guarde el archivo zip localmente en su ordenador;
- A continuación, abra el archivo zip en su ordenador para extraer las fuentes. Por lo general, los encontrará en los formatos WOFF y WOFF 2.0
Ahora que sabe cómo integrar las fuentes en WordPress, veamos cómo puede modificarlas usted mismo en cualquier momento.
Capítulo 2: ¿Cómo edito mis fuentes en WordPress?
2.1. Editar sus fuentes en WordPress
Tiene la posibilidad de editar sus fuentes, y hay varias maneras de hacerlo:
- Utilice el editor de bloques o el editor clásico;
- Utilice la herramienta de personalización de WordPress;
- Realización de cambios en los puestos;
- Realización de cambios en su hoja de estilo.
2.1.1. El editor de bloques de Gutenberg
Con el editor de bloques de Gutenberg, puede cambiar el estilo del texto de su entrada o de su página. Para ello, seleccione la parte que desea modificar
Fuente kinsta.com
Aparecerá un pequeño menú, haga clic en los iconos que aparecen para modificar su texto. Puede hacer que el texto negritacursiva, en en cursiva, el subrayadoetc.
2.1.2. El editor clásico
El editor clásico está presente en las versiones más antiguas de WordPress e incluye una barra de herramientas en la que puede editar fácilmente su texto.
Fuente kinsta.com
2.1.3. La herramienta de personalización de WordPress
En la herramienta de personalización, puede modificar el texto añadiendo CSS manualmente. Para ello, vaya a la pestaña de personalización y haga clic en «Añadir CSS adicional»
A continuación, rellene el cuadro de diálogo con el CSS que desea añadir.
2.1.4. Realice cambios en la hoja de estilo
Para este escenario, si está utilizando un tema predeterminado de WordPress, tendrá que crear un tema hijo
En este tema hijo, tendrá que configurar una nueva hoja de estilos donde integrará su nuevo estilo de fuente.
En caso de que esté utilizando un tema personalizado, abra la carpeta de su tema wp-contenido/temas y cambiar el CSS en el style.css.
2.2. ¿cómo cambiar los colores de las fuentes en WordPress?
También puede cambiar el color de algunos de los textos de su página web utilizando los mismos métodos que para cambiar el estilo de la fuente.
2.2.1. Editor Gutenberg
El editor de bloques de Gutenberg le permite cambiar no sólo el color del texto, sino también su fondo. Para ello, debe
- Abra el marco;
- Vaya a la pestaña «Ajustes de color»
- A continuación, seleccione las paletas de colores que desee para cambiar el color de sus bloques de texto y su fondo.
2.2.2. El editor clásico de WordPress
El editor clásico de las versiones más antiguas de WordPress también le ofrece la posibilidad de cambiar sólo el color del texto que ha seleccionado
2.2.3. Personalización del tema
Algunos temas le permiten cambiar los colores de su sitio. Pero primero debe añadir CSS a la herramienta de personalización para poder cambiar los colores
Haga clic en la pestaña «Añadir CSS adicional» en la sección de personalización e introduzca su CSS en el cuadro de texto.
Fuente kinsta.com
2.2.4. La hoja de estilo
La hoja de estilo también le permite cambiar los colores de las fuentes. Pero para utilizarlo, asegúrese de crear un tema hijo y una nueva hoja de estilos si su tema es un tema por defecto.
En cuanto al tamaño de la letra, también puede cambiarlo con estos diferentes métodos. Pero tenga cuidado, porque si sus párrafos difieren demasiado en tamaño, parecerán incoherentes y difíciles de leer
Para los colores, si la combinación dificulta el acceso, recibirá una advertencia de WordPress. Tenga en cuenta también que si los colores son excesivos, su sitio no tendrá un aspecto verdaderamente profesional, lo que sin duda decepcionará a sus visitantes.
Hablando de «complacer a sus visitantes», en el próximo capítulo le mostraré cómo elegir las fuentes adecuadas para utilizar en su sitio de WordPress.
Capítulo 3. Mejores prácticas para encontrar buenas fuentes
Es bueno personalizar sus fuentes. Pero es aún mejor elegir y aplicar las fuentes adecuadas
Como he dicho antes, las fuentes son el escaparate de su tema. Reflejan de un modo u otro la imagen de su sitio web.
3.1. Aspectos a tener en cuenta a la hora de elegir los tipos de letra
Lo primero es elegir en función de la imagen que quiera dar a su sitio o marca. También debe centrarse en :
- Legibilidad si el tipo de letra es poco visible o ilegible, la interfaz de su sitio será desagradable y los visitantes también se cansarán de leerle por culpa de la mala elección del tipo de letra.
- Tamaño de letra elija una fuente con un buen tamaño para que su blog sea más agradable de leer.
- Espacios entre líneas y entre caracteres espaciamiento: Es de dominio público que la corriente de Internet es ahora propiedad de los teléfonos inteligentes. Imagínese leer una entrada de blog con caracteres difíciles de distinguir en su smartphone
También es importante acertar con la mezcla de fuentes. Puede elegir fuentes de la misma familia o escoger las que le interesen
Por lo tanto, sepa cómo hacer la combinación correcta para no lastrar su tema ni perder su personalización. También hay varias herramientas en línea como Fontjoy o Fontpair para ayudarle a crear la combinación perfecta.
3.2. Consejos para elegir
No es fácil tomar la decisión correcta que le complazca a usted, a sus visitantes y que haga que su WordPress hermoso» como dirían los ingleses
Para ayudarle, he aquí algunos consejos que deberían guiarle hacia una buena elección del tipo de letra:
- Busque fuentes en sus documentos impresos que sean lo suficientemente interesantes como para utilizarlas como fuentes web
- Elija las fuentes más populares de los bancos de fuentes. Son utilizados por un gran número de personas, por lo que resultan familiares para los usuarios de Internet.
- Visite los sitios de sus competidores y vea lo que ofrecen para poder responder mejor.
Tómese la molestia de experimentar con sus opciones antes de aplicarlas a su sitio. Además, evite poner en cola variaciones de fuentes que no utiliza o alojar en su sitio fuentes que no utiliza
Asegúrese también de que los tipos de letra que utiliza están bien encolados.
Capítulo 4: Otras preguntas sobre las fuentes de WordPress
4.1. ¿Cómo puedo incrustar una fuente personalizada en WordPress?
Hay varias opciones para hacerlo:
- Codifique las fuentes web en su tema y utilícelas;
- Instale una extensión en su sitio que le permita utilizar fuentes web;
- Añadir manualmente desde una fuente local fuentes previamente descargadas;
- Alojar fuentes en su sitio de WordPress.
4.2) ¿Cómo subo la fuente a través del gestor de archivos en WordPress?
Para cargar su fuente mediante el gestor de archivos, siga estos pasos:
- Vaya a su sitio web cPanel;
- Vaya al Gestor de Archivos;
- Vaya a wp-content/themes/your-theme/fonts (o cree una carpeta de fuentes si no existe);
- Descargue el archivo zip de la fuente personalizada;
- Descomprima la fuente en la carpeta ;
- Anote la ruta del archivo, ya que necesitará hacer referencia a él en su CSS.
4.3. ¿Cómo se añade la fuente personalizada al tema?
Para ello, deberá hacer referencia a él en su documento styles.css y especificar dónde quiere que se aplique.
Si aún no lo ha hecho, asegúrese de que está utilizando un tema hijo para que su CSS personalizado no se pierda en las actualizaciones del tema. Ya hablamos de esto en el capítulo 2.
Puede añadir CSS personalizado a su sitio web para hacer referencia a su nueva fuente. Para ello, tiene dos opciones:
- Utilice el editor de WordPress;
- Utilice el gestor de archivos.
4.4. ¿Qué tipos de letra se pueden utilizar en la web?
Técnicamente hablando, puede añadir casi cualquier tipo de letra a cualquier sitio web.
Sin embargo, cuando busque una fuente en línea, siempre debe tener en cuenta el precio, la acuerdo de licencia y el método de instalación.
Sin más preámbulos, he aquí algunas de las bibliotecas de fuentes más populares que pueden ayudarle a encontrar la fuente perfecta
- Google Fonts (GRATIS) ;
- Fuentes de Adobe (Premium) Adobe Fonts (antes Typekit) ;
- Fuente Ardilla.
4.5. ¿Cuáles son los diferentes formatos de fuentes que existen?
Es hora de conocer los diferentes tipos de fuentes que existen. Es importante recordar que cada tipo de fuente tiene una extensión diferente y una compatibilidad distinta con una serie de navegadores.
- Fuente TrueType (TTF) ;
- Fuente OpenType (OTF) ;
- Formato de fuentes abiertas para la web (WOFF);
- Web Open Font Format 2.0 (WOFF2) ;
- Fuente OpenType incrustada (EOT).
4.6. ¿Cómo soportan los navegadores los formatos de letra?
En los últimos años, los navegadores modernos han introducido mejoras significativas en la forma en que admiten las fuentes personalizadas. Pero incluso hoy, no todos los formatos son compatibles con todos los navegadores.
Aquí están los navegadores más populares y el formato de fuente que soportan actualmente:
- Fuente TrueType (TTF): Compatible con Internet Explorer versión 9.0 y superior, Chrome a partir de 4.0, Firefox a partir de 3.5, Safari a partir de 3.1 y Opera a partir de 10.0 ;
- Fuente OpenType (OTF): Tiene la misma compatibilidad con los navegadores que la fuente TrueType;
- Web Open Font Format (WOFF): Funciona con Internet Explorer versión 9.0 y superior, Chrome 5.0+, Firefox 3.6+, Safari 5.1+ y Opera 11.1 y superior;
- Formato de fuentes abiertas en la web 2.0 (WOFF2): Funciona con Google Chrome desde la versión 36.0, Firefox desde la 35.0 y Opera desde la 26.0 ;
- Fuente OpenType incrustada (EOT): Sólo funciona con la versión 6+ de Internet Explorer.
Fuente w3schools
4.7. ¿Cómo elegir el formato de letra adecuado?
Web Open Font Format (WOFF) se ha convertido en el tipo de fuente estándar de la industria, ya que contiene metadatos adicionales y utiliza menos ancho de banda para su representación.
Sin embargo, a menudo es difícil encontrar versiones WOFF de todos los tipos de letra, y es un tipo de letra utilizado en los navegadores modernos.
Las fuentes TTF y las fuentes OTF son más fáciles de encontrar y pueden estar disponibles si no encuentra una versión WOFF de la fuente elegida.
En resumen, el uso de TTF/OTF y WOFF garantizará que sus fuentes sean compatibles con todos los navegadores.
Para obtener más detalles sobre los formatos de fuentes compatibles, pruebe ¿Puedo utilizaruna excelente herramienta para comprobar la compatibilidad de funciones entre diferentes versiones de navegadores (GRATIS).
En resumen
La personalización de las fuentes es una baza importante si quiere que su sitio de WordPress se distinga de los demás
Aunque no es un ejercicio fácil, ayuda a embellecer el tema o el diseño de su sitio y a optimizar la experiencia del usuario
La elección de las fuentes es tan importante como su formato. Así que asegúrese de seleccionar las fuentes adecuadas para su marca y de cambiarlas a su gusto
Considere también fuentes seguras para la web fuentes para cuando los visitantes no puedan ver las fuentes que ha incluido por una u otra razón
Sin embargo, no se exceda en los cambios. Esto podría dificultar el acceso a su sitio web y hacer que sus textos sean cansados y difíciles de leer.
Así que ahora ya sabe cómo integrar y modificar las fuentes en su sitio de WordPress, cómo modificar los colores del texto y también cómo elegir las fuentes adecuadas para que su sitio tenga un aspecto atractivo y profesional.
¡Gracias y hasta pronto!
