3 formas diferentes de agregar fuentes personalizadas al tema de su sitio de WordPress

Hay muchas formas interesantes y personalizables de hacer que su sitio web de WordPress se vea más único y visualmente atractivo. Una de las formas es agregar fuentes personalizadas a su sitio de WordPress. Eche un vistazo a algunos de los sitios web de sus competidores. Pueden emular el mismo tono y estilo que también esperas crear con tu propio sitio web de WordPress. Preste atención a su uso de fuentes. Muchos sitios exitosos tienden a usar un puñado de fuentes cuidadosamente seleccionadas que se usan de manera consistente en todo el sitio web.

Hay tantas fuentes personalizadas disponibles en línea de forma gratuita que puede agregar fácilmente a su propio sitio. Después de encontrar las fuentes correctas, necesitará saber cómo aplicarlas a su sitio web. Hay una variedad de métodos que puede probar para lograr esto.

Lo primero es lo primero, encontrar la fuente correcta; hay innumerables sitios que ofrecen miles de fuentes gratuitas para descargar. Pruebe Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Free Fonts, Fonts.com.

En resumen, hay dos formas principales de agregar fuentes personalizadas a su sitio web de WordPress: manualmente o con complementos.

Agregue manualmente fuentes personalizadas al tema de su sitio de WordPress

Agregar fuentes personalizadas a su WordPress manualmente puede ser beneficioso si prefiere no arriesgarse a sobrecargar su sitio de WordPress con demasiados complementos. Esto se puede lograr editando la directiva @font-face. Esto le permite conectar múltiples fuentes de cualquier formato a su sitio.

Esto implica los siguientes pasos:

Paso 1

Primero, descargue las fuentes personalizadas elegidas desde cualquier sitio web que haya encontrado más útil. Una vez que el archivo se guarde en su computadora, extraiga este archivo .zip.

Paso 2

Después de esto, puede cargar este archivo de fuente en su servidor de alojamiento de WordPress en el directorio "wp-content/themes/your-theme-folder/fonts". Si aún no ha configurado una carpeta designada para sus fuentes personalizadas, cree una y guárdela allí.

Paso 3

A continuación, dirígete al área de administración de WordPress. Seleccione Apariencia y luego vaya al Editor de temas. En este punto, verá el archivo style.css del tema en su pantalla. Debajo de esto, deberá agregar esta sección de código:

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

Recuerde reemplazar la "URL" y la "familia de fuentes" en el código con los valores apropiados para que se correspondan con la fuente elegida. También debe pegar esta sección de código al principio del archivo CSS, pero después de comentar el tema.

Etapa 4

Finalmente, asegúrese de hacer clic en el importante botón Actualizar archivo. Esto asegura que sus cambios se guarden correctamente antes de salir de la página.

Paso 5

Después de esto, puede usar fácilmente la fuente en cualquier otro lugar donde desee aplicarla en la hoja de estilo de su tema. Usando el siguiente código:

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Ahora que ha editado este código de fuente, cada vez que alguien ingrese a su sitio web, la fuente se cargará. Pero aún no lo ha aplicado a ningún elemento en particular de la página. Para hacer esto, debe realizar una edición final más en el archivo style.css correspondiente al que estaba accediendo. Deberá ingresar un código como el siguiente en el archivo:

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Recomendado para ti: Guía para principiantes: ¿Cómo instalar un tema de WordPress?

Nota rápida:

Recuerde, como antes, editar el valor de la familia de fuentes para que sea apropiado para la fuente que está utilizando.

Si, por ejemplo, está utilizando tipos de letra personalizados de Google Fonts, verá que hay una pestaña llamada @import, que le proporciona el código relevante para simplemente copiar y pegar en el archivo style.css de su tema. Esto puede hacer que todo el proceso sea mucho más simple si no se siente cómodo lidiando con demasiada codificación.

Sin embargo, este ya no es un método muy recomendable. Ha encontrado algunos problemas de rendimiento que impiden que los navegadores descarguen varias hojas de estilo al mismo tiempo. Esto da como resultado que las páginas se carguen más lentamente. Así que tenga esto en cuenta cuando elija sus fuentes y métodos para usarlas.

Por otro lado, la instalación manual de fuentes personalizadas a través de CSS le permite conectar fuentes de una variedad de formatos, incluidos SVG, WOFF, TTF y OTF. Este método también le permite trabajar sin tener que depender de servicios de terceros. Sus archivos de fuentes se ubicarán en su servidor. Esta es la forma más directa de agregar fuentes personalizadas a WordPress.

Use complementos para agregar fuentes personalizadas al tema de su sitio de WordPress

Muchas personas eligen usar complementos para incluir sus fuentes personalizadas en sus sitios de WordPress, ya que en muchos sentidos puede ser el método más simple para hacerlo. Esto es especialmente cierto si no desea lidiar con la codificación CSS. Google Fonts es una opción popular, en gran parte porque se puede usar fácilmente junto con el complemento de WordPress. Las dos mejores opciones para ti son Easy Google Fonts y Google Fonts Typography. Una vez que haya activado cualquiera de estos complementos, podrá acceder fácilmente a todo el catálogo de fuentes de Google Fonts para agregar a sus páginas sin tener que lidiar con ningún código complicado.

El uso de Google Fonts es la forma más sencilla de hacer esto y puede obtener una vista previa de sus cambios y fuentes personalizadas en tiempo real en la pantalla.

Dependiendo de los archivos de fuentes que desee usar y si tiene la intención de usar un solo repositorio o no, puede considerar usar un complemento alternativo, como el complemento de fuentes personalizadas.

Paso 1

Una vez que haya instalado el complemento de su elección y lo active, vaya a Apariencia y luego haga clic en la página del Personalizador, que abrirá la página de la interfaz del personalizador del tema de WordPress en vivo. Aquí es donde verá la pestaña Tipografía, que le mostrará cada sección de su propio sitio a la que puede aplicar sus propias fuentes personalizadas.

Paso 2

Una vez que haya abierto esta página, podrá hacer clic en el botón Editar fuente dentro de la sección de la página que desea comenzar a editar. Luego, puede trabajar en las diversas subsecciones, seleccionando el estilo de fuente, el tamaño, el margen, etc. Estas secciones variarán según el tema que esté utilizando.

Su tema también podría significar que no podrá editar directamente su selección de fuente para varias secciones de su sitio web. Sin embargo, hay una solución simple para este problema: simplemente diríjase a Configuración, luego a Fuentes de Google, donde puede crear sus propios controles de fuente. Para hacer esto, simplemente ingrese un nombre de control en el cuadro y seleccione los selectores de CSS. Esto le permite agregar cualquier elemento HTML al que le gustaría apuntar para esta fuente. Una vez que haya ingresado esta información, asegúrese de guardar sus cambios haciendo clic en el botón Guardar control de fuentes para que su configuración esté completamente actualizada. Luego puede continuar creando tantos controles de fuente personalizados como necesite para cada sección diferente de su sitio web de WordPress.

Paso 3

Para usar estos nuevos controladores de fuente después de haberlos creado, simplemente regrese a la sección Apariencia, haga clic en Personalizador y luego haga clic en la pestaña Tipografía. Después de esto, verá la opción denominada Tipografía de tema: al hacer clic en ella, podrá acceder a sus controles de fuente personalizados simplemente seleccionando el botón Editar para que pueda elegir las fuentes que desea y la apariencia que desea para este particular. control. Una vez más, no olvide guardar sus cambios haciendo clic en el botón Publicar o Guardar para actualizar su sitio.

Nota rápida:

Algunos otros excelentes complementos de fuentes personalizadas de WordPress que recomendaríamos son Custom Font Uploader y Use Any Font, pero hay muchos otros para elegir, así que explore sus opciones antes de decidirse por la que desea usar.

También te puede interesar: Los 20 temas de WordPress de micro nicho más vendidos.

Finalmente, intente usar temas

Además de estos dos métodos principales para agregar fuentes y tipografías personalizadas a su sitio web de WordPress, también puede utilizar los temas que puede elegir. Hay numerosos temas disponibles, muchos de los cuales vienen con opciones integradas que le permiten personalizar las fuentes instaladas. El proceso para hacerlo variará según el tema que esté utilizando. Así que asegúrese de buscar la guía adecuada para su tema. Los temas premium de WordPress de alta calidad también ofrecerán documentos disponibles para acceso en línea que brindan pautas para agregar fuentes personalizadas a ese tema en particular.

Podría decirse que los elementos visuales y de diseño son uno de los factores más importantes para crear un sitio web eficaz que capte la atención de todas las personas que lo visiten. Una de las características más importantes dentro de esta esfera es el uso de fuentes. Independientemente de la forma que elija para agregar fuentes personalizadas a su sitio web de WordPress, debe encontrar y utilizar las fuentes más adecuadas para el estilo, la audiencia, el contenido, el tema y el tono de todo su sitio web y marca.

 Este artículo está escrito por Beatrice Beard. Beatrice es una redactora profesional en Academic Brits, que se especializa en una impresionante variedad de temas y áreas temáticas. Beatrice siempre está abierta a compartir su experiencia personal y brindar consejos expertos a escritores principiantes para descubrir todos los desafíos y peculiaridades de crear contenido de alta calidad que realmente vende.