2xGwxCB
Si desea que su sitio web destaque realmente entre la multitud, el uso de fuentes personalizadas le ayudará a conseguirlo. Hay miles de hermosas fuentes personalizadas para elegir, y al seleccionar las adecuadas para su proyecto, podrá crear un sitio web que no sólo sea único, sino que también refleje su estilo y su marca. Entonces, ¿cómo se agregan fuentes personalizadas a WordPress?
En este artículo, cubriremos todo lo que necesita saber sobre la aplicación de fuentes personalizadas a su sitio web. Esto incluye…
- Dónde encontrar fuentes personalizadas
- Cómo añadir fuentes de Google a tu sitio web mediante el complemento Easy Google Fonts
- Adición manual de fuentes de Google a tu sitio web (no se necesita ningún complemento)
- Adición de fuentes de Adobe a WordPress
- Cómo agregar cualquier fuente personalizada a su espacio web
¿Listo para empezar?
¿Dónde puede encontrar fuentes personalizadas?
Hoy en día, muchos temas premium de WordPress se envían con una plétora de fuentes personalizadas. Sin embargo, estos a menudo pueden aumentar la hinchazón del tema, e impactar los tiempos de carga de su sitio web más de lo que usted piensa. También encontrará que en realidad sólo utiliza un par de fuentes personalizadas como máximo, por lo que la mayoría de las fuentes que proporciona el tema nunca serán necesarias.
Por lo tanto, te recomendamos que elijas un tema de WordPress ligero, al que puedes añadir fuentes personalizadas cuando sea necesario. Hay una serie de lugares donde puede encontrar las fuentes personalizadas adecuadas para su sitio web. Echemos un vistazo…
- Fuentes de Google: la opción más popular, Google Fonts, ofrece un directorio gratuito de más de 900 fuentes de diseño de código abierto que se pueden utilizar en más de 135 idiomas. Estas fuentes se pueden navegar rápidamente y luego se pueden integrar sin problemas en cualquier proyecto de diseño web.
- Fuentes Adobe (anteriormente conocidas como Typekit) – Aunque Typekit ofrecía versiones gratuitas y premium de su servicio, ahora renombradas como fuentes Adobe, necesitará registrarse en el paquete de Adobe Creative Cloud de pago para acceder a este recurso. Hay miles de fuentes para elegir, todas las fuentes tienen licencia para uso personal y comercial, y también puede seleccionar entre los paquetes de fuentes temáticas de proyectos, que son perfectos para aquellos que carecen de ojo para el diseño.
- Font Squirrel – En la biblioteca de Font Squirrel encontrará una mezcla de fuentes gratuitas y premium, estas últimas que se pueden comprar como compras únicas. Una vez más, puede elegir entre miles de fuentes de alta calidad, la mayoría de ellas gratuitas y con licencia comercial.
- Fonts.com – Con más de 150.000 productos de fuentes de escritorio y web, Font.com contiene una impresionante colección de fuentes personalizadas de primera calidad. También encontrará una variedad de artículos interesantes en el blog de Font.com, compartiendo consejos y técnicas tipográficas.
- FontPair – Ofreciendo una experiencia ligeramente diferente a los otros recursos, FontPair combina fuentes de Google Fonts, ayudándole a encontrar las combinaciones correctas de fuentes para su sitio web.
Por lo tanto, ahora ya sabe dónde encontrar fuentes personalizadas. Veamos a continuación cómo añadir fuentes de Google a tu sitio web de WordPress…
Cómo añadir fuentes de Google a WordPress utilizando el plugin Fácil Google Fonts
Dado que Google Fonts es el recurso más popular para las fuentes personalizadas, empezaremos por estudiar cómo añadir una fuente de esta biblioteca a tu sitio web. Hay varias maneras de hacerlo, pero la opción más rápida y fácil es usar el plugin WordPress Easy Google Fonts.
Easy Google Fonts es un plugin gratuito de WordPress que te permitirá insertar fuentes personalizadas en tu sitio web de WordPress, sin tener que tocar una línea de código. Integrado con el personalizador de WordPress, este plugin le permitirá insertar y utilizar fuentes de Google en el front-end de su sitio web en tiempo real, sin tener que actualizar la página.
Así que ahora vamos a averiguar cómo instalar y usar este plugin…
Paso 1: Instalar fuentes de Google de forma sencilla
Para empezar a utilizar las fuentes de Easy Google, abre el panel de control de WordPress y selecciona Plugins > Añadir nuevo en el menú.
A continuación, escribe Easy Google Fonts en la función de búsqueda y, una vez recuperado el complemento, haz clic en Instalar > Activar.
Ahora encontrarás Fuentes de Google en Configuración en el menú de WordPress.
Paso 2: Editar fuentes en el Personalizador de WordPress
Una vez que hayas instalado las fuentes de Easy Google, en el menú de WordPress selecciona Apariencia > Personalizar. Su sitio web se abrirá en el front-end, donde encontrará una sección de Tipografía que ha sido añadida al customizador.
Haga clic en Tipografía. A continuación, puede seleccionar las diferentes áreas de su sitio web en las que desea aplicar una fuente de Google personalizada (por ejemplo, párrafo, encabezado 2, encabezado 3, etc.).
En la sección que desee editar, haga clic en Editar fuente. A continuación, puede seleccionar la fuente que desea utilizar: podrá obtener una vista previa de cómo se ve cada fuente directamente en su sitio web.
No sólo puede alterar el tipo de fuente, sino que también puede cambiar el color, el tamaño, la posición y mucho más. Una vez que esté satisfecho con la nueva fuente, haga clic en Publicar.
Paso 3: Crear controles de fuente personalizados
Los sencillos controles predeterminados de Google Fonts te permitirán modificar las fuentes de las secciones de párrafo y los encabezados 1 a 6. Sin embargo, no todos los elementos del tema se pueden administrar con los controles de fuente predeterminados.
Si desea modificar un elemento diferente del tema (que no sea un párrafo o encabezado), deberá crear sus propios controles de fuente personalizados. Aunque el Easy Font Control le permite hacer esto fácilmente, necesitará un conocimiento básico de los selectores CSS.
Para añadir controles de fuentes personalizados, selecciona Configuración > Fuentes de Google en el panel de control de WordPress. A continuación, en la ficha Editar controles de fuentes, asigne a su nuevo grupo de control de fuentes un nombre apropiado y, a continuación, seleccione Crear control de fuentes. Aquí crearemos un control de fuentes para las comillas de bloques…
En Agregar selectores de CSS, agregue el selector de CSS para el elemento que desea administrar. Puede añadir más de un elemento si lo desea. A continuación, seleccione Guardar control de fuentes.
De vuelta en el Personalizador en el front-end de su sitio web, bajo Tipografía encontrará la opción Tipografía del Tema, donde podrá acceder a sus nuevos controles personalizados.
Ahora puede seleccionar una nueva fuente personalizada para el elemento personalizado específico y cambiar cualquier otra configuración de Apariencia y Posicionamiento.
Easy Custom Fonts es una gran opción para cualquiera que desee añadir fuentes personalizadas a WordPress desde Google. Sin embargo, si lo prefieres, también puedes añadir manualmente fuentes de Google a tu sitio web utilizando sólo código, sin plugin. Averigüemos cómo hacer esto…
Cómo añadir manualmente fuentes de Google a WordPress (no se necesita ningún plugin)
Si prefieres añadir fuentes de Google a WordPress manualmente, entonces necesitarás un conocimiento muy básico de codificación.
Paso 1: Seleccionar una fuente de Google
Para empezar, abre Fuentes de Google y selecciona el tipo de fuente personalizado que deseas añadir a tu sitio web.
Luego, en la página de la fuente, haga clic en Seleccionar esta fuente. Aquí hemos seleccionado la fuente Indie Flower…
Aparecerá una ventana emergente en su pantalla. Dependiendo de la fuente que haya seleccionado, en esta ventana emergente podrá acceder a una selección de opciones de personalización de pesos y estilos de fuentes, así como ver la información de incrustación.
Paso 2: Incruste el código de la fuente personalizada en su sitio web de WordPress
A continuación, deberá copiar el código de incrustación (ver popup arriba) y pegarlo en la sección <cabecera> de su tema de WordPress. La forma más fácil de hacerlo es instalar el plugin gratuito WordPress Insert Headers and Footers. Usando este plugin usted puede agregar rápidamente código a su sitio web sin tener que editar sus archivos de tema.
Después de la instalación, abra la configuración del plugin seleccionando Configuración > Insertar encabezado y pie de página en el panel de control de WordPress. A continuación, deberá añadir el código de incrustación de fuentes de Google en la sección Encabezado…
Del mismo modo, si lo prefiere, puede editar el archivo header.php del tema hijo.
Paso 3: Aplicar la nueva fuente utilizando CSS
Una vez que haya agregado el código HTML para su fuente personalizada a su sitio web, ahora puede utilizar CSS para aplicar su nueva fuente personalizada. En la ventana emergente de Google Fonts, encontrarás las reglas CSS específicas de tu nueva fuente.
De vuelta en el Personalizador en el lado activo de su sitio web, seleccione CSS adicional. Aquí puede introducir el código CSS para personalizar las fuentes de su sitio. A continuación se puede ver que hemos aplicado el código CSS de Indie Flower a la cabecera 2 y a las secciones de párrafo…
El personalizador le mostrará las alteraciones de fuente en tiempo real, y si está satisfecho con los resultados, haga clic en Publicar.
Cómo añadir fuentes de Adobe a WordPress
Si se ha registrado en el paquete Creative Cloud Premium de Adobe, podrá añadir cualquiera de sus fuentes personalizadas a su sitio web de WordPress. Este proceso es muy similar al de añadir manualmente fuentes de Google a tu sitio. Echemos un vistazo rápido…
Paso 1: Elija una fuente de Adobe
En primer lugar, deberá examinar la extensa biblioteca de fuentes de Adobe y elegir una o varias fuentes que se adapten a su proyecto. Una vez que haya hecho una selección, haga clic en el icono </> para añadir la fuente a un nuevo proyecto web.
Ahora se le pedirá que nombre su proyecto web, así como que use las casillas de verificación para seleccionar los pesos y estilos de fuente que desea incluir. A continuación, seleccione Crear proyecto.
Paso 2: Incruste el código de la fuente de Adobe en su sitio web de WordPress
El siguiente paso es insertar el código que Adobe proporciona para la fuente elegida en el sitio web de WordPress.
Esto sigue exactamente el mismo proceso que incrustar el código de Google Fonts. Simplemente incrusta el código en la etiqueta <head> de tu sitio web o usa el plugin de WordPress Insertar Encabezados y Pies de página (como se discutió anteriormente).
Paso 3: Aplicar la nueva fuente utilizando CSS
Una vez más, al igual que con las fuentes de Google, ahora puedes aplicar tu nueva fuente personalizada de Adobe mediante reglas CSS. En el panel de control de Adobe, la página de su proyecto web mostrará el nombre de la familia de fuentes CSS, así como el estilo de fuente y el peso numérico, para cada tipo de fuente que haya seleccionado.
De vuelta en su sitio web de WordPress, estas reglas CSS pueden ser usadas dentro del Personalizador bajo CSS Adicional.
Así que ahora hemos cubierto cómo añadir fuentes personalizadas a WordPress utilizando las populares fuentes gratuitas de Google, así como las impresionantes fuentes de recursos Premium de Adobe.
Sin embargo, la última opción que discutiremos le permite añadir cualquier fuente personalizada a su sitio web subiéndola al servidor de su sitio. Averigüemos más..
Cómo añadir una fuente personalizada a su espacio web
Añadir una fuente personalizada a su espacio web es relativamente sencillo, pero una vez más, necesitará un conocimiento básico de CSS para aplicar la fuente a su sitio web.
Paso 1: Descargar una fuente personalizada
Como se mencionó al principio de este artículo, existen numerosos recursos en los que puede seleccionar fuentes personalizadas gratuitas o premium para usar en su sitio web. Al elegir una fuente personalizada en add to your server, asegúrate de que tienes el derecho de usarla y que es descargable.
Aquí hemos descargado la fuente personalizada gratis Milkshake de Squirrel Fonts…
Es importante que descargue su fuente personalizada en formato de fuente web. El formato de contenedor de fuentes web WOFF es el más compatible con todos los navegadores, pero Google recomienda la entrega de varios formatos para proporcionar una experiencia coherente a los usuarios en todos los dispositivos.
Si necesita convertir su fuente personalizada en un formato diferente, entonces Squirrel Font proporciona una herramienta gratuita de Webfont Generator que le permitirá hacerlo.
Paso 2: Subir la fuente personalizada a su servidor
El siguiente paso es cargar su fuente personalizada en su servidor. Para ello, abra el Administrador de Archivos en el cPanel de su sitio.
Luego, dentro de la carpeta de temas activos, cree una nueva carpeta llamada Fuentes y cargue aquí su fuente personalizada.
Si tiene varios formatos de su fuente, cárguelos todos a la carpeta Fuentes. Su fuente personalizada ha sido ahora añadida a su espacio web.
Paso 3: Utilice CSS para aplicar la fuente personalizada a su sitio web
Ahora necesita aplicar la fuente personalizada a su sitio web. Para empezar, necesita cargar la fuente en la hoja de estilo de su tema. Para ello, abra el personalizador de WordPress y en CSS adicional añada este código…
@font-face {
fuente-familia; Batido de leche
Src: url (https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff);
}
Es importante que cambie el nombre de la fuente y la URL (copie la URL del archivo de fuente en su servidor).
A continuación, puede seguir adelante y utilizar las reglas CSS para actualizar las fuentes de su sitio. He aquí un ejemplo de cómo aplicar la fuente personalizada al Encabezado 3 y a las secciones de párrafo…
Una vez que esté satisfecho con el aspecto de su nueva fuente personalizada en su sitio web, haga clic en Publicar.
Reflexiones finales sobre cómo agregar fuentes personalizadas a WordPress
Como puede ver, si está buscando una fuente personalizada hermosa y llamativa, existen numerosos recursos que le permitirán encontrar la fuente perfecta para su proyecto. Y lo que es más, ahora está armado con el conocimiento de cómo añadir con éxito fuentes personalizadas a WordPress. Entonces, ¿qué fuentes personalizadas elegirás?
¿Tienes alguna pregunta sobre cómo añadir fuentes personalizadas a WordPress? Por favor, pregunte en los comentarios de abajo…
Facebook Twitter
Megan Jones
Puestos relacionados
Revisión del tema del Éxodo: Construir un sitio web de la Iglesia con WordPress- 4 de julio (Día de la Independencia) Ofertas de WordPress 2016
- DirectorioRevisión de Motores: Construir un directorio en línea con WordPress
