Elegir la fuente adecuada para su sitio web puede ser una tarea larga y desafiante. Hay muchas cosas a considerar: qué tipo de estilo de fuente se ajustará a la esencia de su marca, cuántos tipos de letra diferentes debe elegir, ya sea para ir a lo seguro o optar por algo más único y desafiante, y la lista continúa. Aún así, el resultado final generalmente vale la pena, ya que las buenas fuentes pueden tener un impacto significativo en la experiencia del usuario y, en consecuencia, en el éxito general de su página web.
Ahora, es importante tener en cuenta que estamos hablando de fuentes personalizadas estrictamente desde la perspectiva de WordPress. Esto significa que no estamos usando el término "fuente personalizada" en su sentido más general, que se refiere a fuentes que están diseñadas específicamente para un cliente. En su lugar, nos referimos a las fuentes que no se incluyen con WordPress de fábrica.
Hoy en día, las fuentes personalizadas se han convertido en una fuerza siempre presente en muchos sitios de WordPress. Por esta razón, hay muchos temas de WordPress que vienen con fuentes personalizadas. Sin embargo, tener demasiadas fuentes personalizadas activas en su sitio puede afectar negativamente la velocidad de su sitio web. Afortunadamente, hay una forma de evitarlo. Hemos decidido mostrar cómo puede agregar fuentes web personalizadas a su sitio de WordPress sin ralentizarlo. Puede leer más sobre esto a continuación, o puede ver el video en su lugar.
Como ya mencionamos, elegir qué fuentes usar para su sitio puede ser difícil. Si no está seguro de cómo hacerlo, hay recursos de fuentes gratuitos y con licencia en la web - como Font Squirrel, por ejemplo. Este es un sitio web donde puede encontrar fuentes gratuitas de alta calidad de toda la web, y puede usarlas tanto para fines personales como comerciales.
Aparte de Font Squirrel, Google Fonts, Envato, fonts.com y Fontspace son solo algunos de los muchos otros lugares destinados a ayudarlo a encontrar lo que está buscando.
Durante la creación del sitio web, la gente suele elegir y combinar dos fuentes diferentes - uno para los títulos y el otro para el cuerpo. No se recomienda elegir más de dos fuentes a menos que sea un diseñador experimentado, ya que puede hacer que su página se vea desordenada y ralentizar el tiempo de carga de la página. En caso de que no esté seguro de qué fuentes usar juntas, FontPair puede ayudarlo a tomar una decisión y encontrar la combinación perfecta para usted. Allí, puede navegar a través de diferentes sugerencias de pares de fuentes y puede ver instantáneamente los nombres de las fuentes en cuestión, así como el aspecto que tendrán las dos cuando estén organizadas juntas. Tu también tienes la opción de descargar el par de fuentes en el acto. El sitio le permite buscar pares de fuentes según ciertos criterios, como Pares destacados, Serif / Sans Serif, Display / Sans Serif, etc.
Fontjoy es otro sitio que puede ayudarlo en la selección de pares de fuentes. Hay un botón Generar en el que puede hacer clic para generar fuentes y puede determinar qué tan estrechamente están relacionadas. Además, en caso de que ya haya elegido una fuente, puede generar otra y ver cómo coincide con la que ha seleccionado. Lo único que tienes que hacer es haga clic en el icono de candado junto a la fuente deseada para que el generador de fuentes sepa cuál conservar y cuál generar.
Uso de fuentes personalizadas con temas interactivos de Qode
Si está usando (o planea usar) uno de los temas premium de WordPress de Qode Interactive, entonces debe saber que vienen con fuentes de Google ya integradas. Entonces, si desea utilizar cualquier fuente de Google de la enorme biblioteca de fuentes de Google, no tiene que preocuparse.
En nuestros temas, puede encontrar la configuración de fuente si accede a las opciones del tema en cuestión y luego hace clic en Fuentes.
Si desea agregar cualquier otra fuente específica a su tema, puede hacerlo usando uno de los métodos descritos en la sección "Agregar fuentes personalizadas de WordPress sin un plugin" de este artículo. Por otro lado, si no usa nuestros temas, pero aún desea tener una fuente de Google, puede averiguar cómo hacerlo a continuación.
Cómo agregar fuentes personalizadas a su sitio web de WordPress mediante un plugin
Agregar una fuente personalizada a WordPress con un plugin es simple. Le mostraremos cómo hacerlo con dos plugins diferentes.
1. Tipografía de Google Fonts
Este plugin viene con fuentes de Google ya integradas, por lo que no tiene que instalar ninguna, solo tiene que elegir las que desea usar.
Una vez que haya instalado el plugin Tipografía de Google Fonts, puede acceder a sus opciones yendo a Apariencia> Personalizar> Fuentes de Google.
Existen dos grupos diferentes de escenarios que puedes usar - Configuraciones básicas y avanzadas.
En Ajustes básicos, tiene tres opciones diferentes disponibles: Tipografía base, Tipografía de encabezados y Tipografía de botones y entradas. los Tipografía base La opción le permite elegir y configurar la fuente de su cuerpo de texto (el texto que aparece más en su sitio). los Tipografía de encabezados La opción es elegir la fuente para todos los títulos, mientras que Tipografía de botones y entradas le permite seleccionar un tipo de letra para sus campos de entrada y botones.
Para opciones más completas, también hay Ajustes avanzados. Una vez allí, podrá seleccionar una fuente separada para cada título (como fuentes para el título y la descripción del sitio, el título y subtítulos de la publicación y la página, la barra lateral y el pie de página).
También hay una versión Pro del plugin., que viene con algunas otras opciones, como la capacidad de personalizar el tamaño de fuente, el color y la altura de la línea, la opción de optimizar el rendimiento de su sitio web cargando solo los pesos de fuente que planea usar, así como agregar los elementos personalizados que desee que el plugin puede ajustar la configuración en consecuencia y personalizarla más para sus necesidades.
2. Fuentes fáciles de Google
Una vez que instale el plugin Easy Google Fonts, diríjase a Aspecto> Personalizar> Tipografía> Tipografía predeterminada.
Este plugin solo le permite cambiar las fuentes de los párrafos y encabezados, pero no de su pie de página, barra lateral y otras secciones del sitio web. Sin embargo, puede configurar algunas funciones adicionales, como Peso / estilo de fuente, Decoración de texto, Transformación de texto, Tamaño de fuente, etc.
Aunque solo puede cambiar las fuentes de sus párrafos y encabezados, aún puede insertar partes personalizadas de texto para el que desea cambiar la fuente. Diga que, por ejemplo, desea cambiar la tipografía de las citas en bloque y los enlaces. Para hacer esto, simplemente necesita insertar campos personalizados para estas categorías. Te mostraremos cómo.
Ir Configuración> Fuentes de Google.
Si desea la misma fuente tanto para blockquotes como para enlaces, entonces necesidad de crear un control de fuente. Puede hacer esto ingresando un nombre en el Nombre de control campo, luego haga clic en el Crear control de fuentes botón.
Entonces deberías coloque las etiquetas HTML para los enlaces y las citas en bloque en el mismo control de fuente (las etiquetas son blockquote y a). Cuando termine, haga clic en Guardar control de fuentes.
Una vez que cree este nuevo control de fuente, obtendrá configuraciones adicionales. Cuando vas a Apariencia> Personalizar> Tipografía, verá otra pestaña llamada Tipografía temática. Aquí encontrará todas las configuraciones para las etiquetas que ha elegido.
La configuración que obtendrá será la misma que la de los controles de fuente predeterminados.
Agregar fuentes personalizadas de WordPress sin un plugin
Hay formas de agregar fuentes personalizadas de WordPress manualmente, y es realmente sencillo hacerlo. Necesita algunos conocimientos básicos de CSS para hacerlo, pero no puede equivocarse si sigue estos pasos. A continuación, le mostraremos dos métodos diferentes para agregar fuentes personalizadas de WordPress sin usar un plugin.
Método 1
Primero, vaya a Google Fonts y busque la fuente que mejor se corresponda con lo que tiene en mente. Cuando elija la fuente deseada, obtendrá toda la información necesaria para incrustarla en su página web.
Entonces, asegúrese de agregar el código en su archivo header.php. Ir Apariencia> Editor de temas, busque el archivo header.php y agregue el código justo debajo de la etiqueta. El código para la fuente Indie Flower que seleccionamos es el siguiente:
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
Ahora necesitas busque el archivo style.css. Para acceder a él, vaya a Apariencia> Editor de temas en su Tablero y seleccione style.css. Allí, definirás los elementos a los que deseas aplicar la fuente. Es decir, si desea una fuente específica para el encabezado H1, esto es lo que insertará en el archivo style.css:
h1 {
font-family: ‘your font name goes here’, cursive;
}
Puede agregar su fuente a cualquier sección de su sitio de la misma manera. Solo necesita conocer el selector de CSS para el elemento para el que desea cambiar la fuente.
Alternativamente, hay otro lugar en el que puede definir dónde aparecerá la fuente. Haga clic en Personalizar> CSS adicional. Desde aquí puede controlar todos los cambios sobre el terreno.
Método 2
El método más sencillo para agregar fuentes personalizadas a WordPress es usando CSS3 @ font-face, que le permite utilizar cualquier fuente que desee en su página web. En primer lugar, debe descargar la fuente que desea usar en formato de archivo web. Si no tiene el formato, simplemente puede convertirlo con FontSquirrel Webfont Generator.
Luego, debe cargar sus archivos de fuentes a su servidor de alojamiento. Usted puede o cargue los archivos en su child directorio del tema, o en una nueva carpeta dentro del tema mismo. Para cargar la fuente, puede usar FTP o el Administrador de archivos de cPanel.
Después de cargar la fuente, debe cargarla en la hoja de estilo CSS de su tema. Para hacer esto, usará la regla CSS3 @ font-face:
@font-face {
font-family: Arvo;
src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Debe especificar el nombre de la fuente, su ubicación en su servidor y su peso de fuente. A partir de ahí, puede usar esa fuente en cualquier lugar de su sitio a través de un simple CSS:
h1 {
font-family: "Arvo", Arial, sans-serif;
}
Conclusión
Y así es como agrega fuentes personalizadas de WordPress a su sitio. Como puede ver, hay muchos métodos diferentes que puede utilizar y ninguno de ellos es demasiado complicado. Así que adelante, elija una fuente (o par de fuentes) que le guste, agréguela a su sitio de WordPress y comience a personalizar para hacer que su tipografía sea hermosa, limpia y notable.
Deja una respuesta