Cómo agregar fuentes personalizadas de WordPress (y elegir las fuentes de ese par)

¿Está buscando una manera de agregar sus propias fuentes personalizadas de WordPress a su sitio?

Su tema de WordPress probablemente viene con su propio conjunto de fuentes para que pueda elegir, pero las opciones pueden ser bastante limitadas, por lo que es totalmente comprensible que desee agregar sus propias fuentes de WordPress en su lugar.

En esta publicación, aprenderá cómo cargar y usar cualquier fuente en WordPress a través de algunos métodos diferentes.

En caso de que no esté familiarizado con la idea de usar sus propias fuentes de WordPress, comenzaremos con una introducción rápida sobre dónde encontrar fuentes personalizadas y cómo emparejarlas.

Luego, le mostraremos cómo agregar fuentes personalizadas de WordPress desde:

• Fuentes de Google
• Fuentes de Adobe (Typekit)
• ¡Literalmente en cualquier otro lugar! (cargando un archivo de fuente y usando CSS3 @ font-face)

Haga clic en este enlace para ir directamente a los tutoriales.

Dónde encontrar fuentes personalizadas para WordPress

El lugar más conocido para encontrar fuentes personalizadas de WordPress es definitivamente Google Fonts. En Google Fonts, encontrará un repositorio de más de 900 fuentes, todas gratuitas y muy fáciles de integrar en su sitio de WordPress gracias al CDN de Google.

Después de Google Fonts, otra opción muy conocida es Adobe Fonts ( antes llamado Typekit ). Las fuentes de Adobe se incluyen sin costo adicional como parte de la suscripción a Creative Cloud de Adobe, pero no están disponibles para los no suscriptores.

Finalmente, puede encontrar muchos otros sitios que agregan fuentes gratuitas y premium. Dos de nuestros favoritos son:

• Font Squirrel: recopila fuentes que son 100% gratuitas para uso comercial.
• Fonts.com: tiene una gran colección de fuentes premium.

Cómo emparejar fuentes para que su sitio se vea increíble

Por lo general, no utilizará una sola fuente en su sitio de WordPress. En cambio, la mayoría de los sitios utilizan pares de fuentes para crear un diseño más interesante y ayudar a diferenciar el contenido.

Sin embargo, no querrás juntar dos fuentes al azar, es posible que eso no se vea demasiado atractivo.

En su lugar, necesita dos fuentes que funcionen juntas, lo que, si no es diseñador , puede ser difícil de descifrar.

Para ayudar, hay un montón de sitios excelentes que le sugerirán pares de fuentes. Por ejemplo, si encuentra una fuente que le encanta , puede usar uno de estos sitios para encontrar un par. Algunos de nuestros favoritos son:

• FontPair
• Fontjoy
• Typ.io

Si bien no existe una regla que diga que solo puede usar dos fuentes, debe tener cuidado de no usar demasiadas fuentes de WordPress. Más allá del potencial de crear un diseño caótico, el uso de demasiadas fuentes personalizadas también puede ralentizar los tiempos de carga de su sitio.

Cómo agregar fuentes personalizadas de WordPress: guías paso a paso

Ahora, la parte divertida: aquí le mostramos cómo comenzar a usar sus propias fuentes personalizadas de WordPress.

Hay algunas rutas que puede tomar aquí dependiendo de dónde desee obtener sus fuentes.

Aquí están los tres métodos que cubriremos. Nuevamente, puede hacer clic en un enlace para ir directamente a un tutorial específico:

1. Agregue Google Fonts en WordPress (plugin, manual o métodos de alojamiento local)
2. Agregar fuentes de Adobe (Typekit) en WordPress
3. Use CSS3 @ font-face para cargar y agregar cualquier fuente en WordPress

Cómo agregar fuentes de Google a WordPress

Debido a que Google Fonts es la fuente más popular de fuentes personalizadas de WordPress, cubriremos tres formas diferentes de agregar Google Fonts a WordPress:

1. Agregue las fuentes de Google de la CDN de Google con un complemento
2. Agregue manualmente las fuentes de Google desde la CDN de Google
3. Aloje Google Fonts localmente en WordPress con un complemento

Cómo agregar fuentes de Google en WordPress usando un complemento

Debido a la popularidad de Google Fonts, puede encontrar varios complementos de calidad que hacen que sea muy simple agregar Google Fonts a WordPress, siendo nuestro favorito Easy Google Fonts porque es:

• Gratis
• Ligero
• Fácil de usar

Una vez que instale y active el complemento, vaya a Apariencia → Personalizar en su panel de WordPress para iniciar el Personalizador de WordPress en tiempo real.

Luego, haga clic en la opción Tipografía para elegir sus opciones de Google Fonts:

Desde allí, puede usar las opciones para elegir una fuente personalizada para cada elemento de su sitio:

Por ejemplo, así es como se ve cambiar la fuente del párrafo:

Más allá de elegir la fuente en sí, el complemento también te permite personalizar:

• Peso de fuente
• Decoración de texto
• Colores

Si conoce un poco de CSS, también puede usar la función de controles de fuentes del complemento para agrupar ciertos elementos. Por ejemplo, puede combinar selectores de encabezados para apuntar a todos sus encabezados a la vez.

Para configurar esto, vaya a Configuración → Fuentes de Google y cree un nuevo Control de fuente para apuntar a selectores CSS específicos:

Cómo agregar fuentes de Google en WordPress sin un complemento

Debido a que Google aloja todas sus fuentes en su propio CDN, también es bastante fácil agregar manualmente las fuentes de Google a WordPress.

Básicamente, en lugar de tener que cargar los archivos de fuentes en su servidor, puede simplemente vincularlos al CDN alojado de Google y Google se encargará de entregar las fuentes por usted.

A algunas personas no les gusta hacer esto por razones de rendimiento; compartiré una forma de alojar localmente Google Fonts en la siguiente sección, si lo desea .

Para comenzar, debe usar el sitio web de Google Fonts para elegir la fuente que desea agregar.

Para este ejemplo, digamos que desea utilizar Roboto .

Vaya a la página de la fuente y haga clic en + Seleccionar esta fuente :

Esto agregará una ventana en la esquina inferior derecha. Haga clic para expandir esa ventana.

Si desea elegir pesos de fuente adicionales ( por ejemplo, para negrita y cursiva ), puede ir a la pestaña Personalizar . Para un buen equilibrio entre usabilidad y rendimiento, recomendamos elegir tres pesos de fuente en un máximo absoluto:

• Regular
• Itálico
• Audaz

Incluso puede usar menos si desea el mejor rendimiento .

Una vez que haya hecho sus elecciones, vuelva a la pestaña Insertar y copie el código de fuente para insertar:

A continuación, debe agregar este código a la sección <head> de su tema de WordPress. Puede hacer esto de la siguiente manera:

• Editando directamente el archivo header.php de su tema hijo ( asegúrese de usar un tema hijo; de lo contrario, sus fuentes personalizadas desaparecerán cuando actualice su tema )
• Usando un complemento gratuito como Insertar encabezados y pies de página

Una vez que haya agregado el código, puede comenzar a usar Google Fonts en su CSS.

Si regresa al sitio web de Google Fonts, Google le dirá las reglas CSS que necesita usar:

Por ejemplo, para que sus etiquetas h2 usen su nueva fuente Roboto, puede ir a Apariencia → Personalizar → CSS adicional y agregar el siguiente fragmento:

h2 {

familia de fuentes: 'Roboto', sans-serif;

}

Cómo alojar fuentes de Google localmente en WordPress con un complemento

¡Aquí está el método final para Google Fonts!

Algunas personas prefieren alojar fuentes de Google de forma local, en lugar de cargarlas desde la CDN de Google. Es decir, en lugar de cargarlos desde un enlace como "https://fonts.googleapis.com/css?family=Roboto:400,700", puede alojar los archivos en su propio servidor.

La forma más sencilla de hacerlo es con un complemento gratuito llamado CAOS para Webfonts.

Una vez que instale y active el complemento, puede ir a Configuración → Optimizar fuentes web para elegir qué fuentes desea descargar a su servidor:

Una vez que haya hecho eso, puede comenzar a usar la (s) fuente (s) en su CSS ( como si estuviera siguiendo el método anterior ).

Cómo agregar fuentes de Adobe (Typekit) en WordPress

Si desea utilizar Adobe Fonts en WordPress, básicamente puede seguir los mismos pasos que el método manual de Google Fonts. Recuerde, el servicio Adobe Fonts solo está disponible como parte de la suscripción a Creative Cloud .

Para comenzar, deberá usar el sitio web de Adobe Fonts para elegir sus fuentes y crear un proyecto web ( instrucciones detalladas aquí ).

En la ventana Agregar fuentes al proyecto web , puede elegir qué fuentes incluir:

Luego, Adobe le dará un código de inserción, al igual que Google Fonts:

Tome ese código de inserción y agréguelo a su sitio utilizando el archivo header.php de su tema secundario o un complemento como Insertar encabezados y pies de página.

Una vez que haya vinculado el archivo CSS, puede usar el CSS que proporciona Adobe para comenzar a aplicar la fuente a los selectores de CSS en su sitio:

Cómo usar @ font-face en WordPress

Finalmente, el último método que le mostraremos es cómo usar @ font-face en WordPress. Lo bueno de este método es que funcionará literalmente con cualquier archivo de fuente de cualquier fuente .

Básicamente, siempre que pueda descargar el archivo de fuente y tenga los derechos para usarlo, CSS3 @ font-face lo hará.

Para comenzar, descargue el archivo de fuente de su fuente preferida. Para este ejemplo, usaremos una fuente gratuita de Font Squirrel llamada Alex Brush .

Si es posible, intente descargar el archivo en los formatos de archivo .woff o .woff2 para obtener la mejor compatibilidad entre navegadores. Si eso no es posible, puede descargar su fuente en un formato diferente y luego usar la herramienta gratuita FontSquirrel Webfont Generator para convertirla a .woff :

A continuación, conéctese al servidor de su sitio de WordPress a través de FTP o cPanel File Manager. Entonces…

• Cree una nueva carpeta llamada fuentes dentro de su tema activo o el directorio del tema hijo ( algunos temas pueden tener ya una carpeta de fuentes . Si ese es el caso, puede omitir esto ).
• Sube el archivo de fuentes a la carpeta de fuentes . Puede cargar los formatos .woff y .woff2

Una vez que haya cargado los archivos, vaya a Apariencia → Personalizar → CSS adicional en su panel de WordPress.

Primero, debes usar @ font-face para agregar tu fuente ...

Para hacer eso, ingrese el nombre de su fuente como la familia de fuentes y agregue la URL directa al archivo de fuente en su servidor como la URL . Así es como se ve para nuestro ejemplo de AlexBrush:

@Perfil delantero {

familia de fuentes: AlexBrush;

src: url (http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

font-weight: normal;

}

Una vez que haya hecho eso, puede usar CSS para aplicar su familia de fuentes ( por el nombre que registró con @ font-face ). Por ejemplo, esto es lo que parece usar la fuente AlexBrush para encabezados <h2>:

¡Y eso es! Puede utilizar este método CSS3 @ font-face para literalmente cualquier archivo de fuente.

Reflexiones finales sobre las fuentes personalizadas de WordPress

Si su tema de WordPress no tiene las fuentes que desea usar, ¡no se asuste! Tiene muchas opciones para agregar sus propias fuentes personalizadas de WordPress.

La forma más fácil de comenzar es con las fuentes gratuitas alojadas en Google Fonts o las opciones premium alojadas en Adobe Fonts.

Sin embargo, de ninguna manera está limitado a esos servicios, y al usar CSS3 @ font-face, puede cargar literalmente cualquier archivo de fuente en WordPress y comenzar a usarlo en su tema.

¡Ahora sal y crea tu propia combinación de fuentes!