Cómo agregar fuentes personalizadas a su sitio de WordPress

Cómo agregar fuentes personalizadas a su sitio de WordPress

¿Por qué hacer que tu blog sea aburrido con fuentes estándar? Deje que su blog hable sobre su personalidad vibrante y los temas que cubre con una amplia variedad de fuentes personalizadas. Las fuentes personalizadas son una buena característica que permite que su blog se vea preferible a otros.


Seamos sinceros; A todos nos encantan los blogs y sitios con las fuentes correctas. No solo decoran el sitio, sino que también ayudan a atraer al usuario a su contenido. Sin embargo, la elección de las fuentes estándar de WordPress es limitada y depende del tema que esté utilizando. La buena noticia es que puede agregarlos manualmente o con complementos especializados.

Y aquí surgen dos preguntas: donde obtener fuentes personalizadas para WordPress y cómo instalar fuentes personalizadas en tu sitio de WordPress.

Vamos a averiguar.

 ¿Por qué debo usar fuentes personalizadas??

Ya pasaron los días en que Times New Roman y Georgia se consideraban las únicas fuentes para textos en sitios web. En los últimos años, el espacio de fuentes ha cambiado completamente con la llegada de fuentes como Google Fonts y otras..

Hoy en día, hay cientos de fuentes gratuitas, ayudas de información y capacitación, y recursos diseñados para el diseño, disponibles en Internet. A diferencia de Adobe Illustrator, Photoshop y otras aplicaciones clásicas, WordPress no le da control total sobre las fuentes de forma predeterminada. Solo algunos temas eligen admitir y usar fuentes personalizadas.

Por lo tanto, en esta publicación, aprenderá cómo encontrar fuentes personalizadas adecuadas y cómo usarlas en su sitio de WordPress.

La importancia de usar fuentes personalizadas

¿Por qué cambiar las fuentes, la sangría entre palabras, el espaciado entre líneas, el espaciado entre letras o la saturación de la fuente? Sea como fuere, algunos estudios demuestran que la tipografía mejora la comprensión lectora.

Mucho depende de la construcción de las fuentes. En un nivel consciente y subconsciente: todos evalúan los contenidos de una página web por diseño.

El diseño de fuente afecta a los lectores, incluso si no le prestan atención. ¡Abandonar el diseño de la fuente significa abandonar el desarrollo mismo! El estado de ánimo del lector depende de ello. La fuente facilita la lectura o obliga a los usuarios a abandonar la página..

Todos los navegadores web incluyen un conjunto de fuentes predeterminadas. Esto significa que si la fuente no se especifica en el CSS de la página, se utilizará la versión estándar. Siempre puede usar las fuentes predeterminadas, pero complican el trabajo de los usuarios. Por eso es esencial usar una fuente personalizada. Si su tema no le da opciones para cambiar la fuente, muchos sitios web y herramientas pueden ayudarlo.

Alternativas de fuentes de Google

Dónde encontrar fuentes personalizadas

Muchos de ustedes saben sobre las fuentes gratuitas de Google. Hay muchos más sitios donde puedes encontrar hermosas fuentes. Algunos de ellos son gratuitos para uso personal. Si necesita un uso comercial, necesita una licencia. Las fuentes de Google y las fuentes de Adobe Edge son gratuitas. Por eso no son tan únicos. Y esto no nos conviene.

Aquí hay algunos otros recursos para encontrar fuentes Para uso gratuito y comercial:

  1. Monstruo de plantilla – En el sitio web del mercado TemplateMonster, encontrará todo lo que necesita para el diseño web. También hay muchas fuentes y paquetes de fuentes para uso personal por un pequeño precio. Además, se presentan en UN kit de desarrollo web. La colección es enorme y creativa. Para ayudarlo a elegir, todas las fuentes se presentan en folletos o marcos. Cada fuente se presenta con una licencia comercial también.
  2. MyFonts – MyFonts actualmente ofrece la mayor selección de fuentes del mundo. Sin embargo, los precios aquí también están en el segmento más alto. Entonces, si tienes un presupuesto ajustado, puede que no sea para ti.
  3. FontSpring – Fontspring vende fuentes elegantes para uso comercial. Pero en casi cualquier familia, las fuentes gratuitas 1-2 pueden usarse para fines personales. Además, hay una sección separada con fuentes gratuitas. La colección es vibran. Pero tendrá que estudiar cuidadosamente la información de la licencia para una fuente en particular antes de descargar.
  4. Cufonfonts – También es una extensa colección de diferentes fuentes. Seleccione cualquiera, y verá una página con información detallada al respecto. Hay muchas fuentes gratuitas y están divididas en secciones individuales. El sistema de clasificación en CufonFonts es bastante flexible y conveniente. Además, el soporte de Webfont está incluido.
  5. Dafont – Otra colección accesible de 3.500 fuentes gratuitas. La mayoría de ellos están diseñados solo para uso personal. Una buena característica DaFont es un sistema de categorías. Puede seleccionar fuentes en el estilo de cómics, videojuegos, vintage o estilizados como caracteres japoneses.

La elección de las fuentes es muy tentadora porque todas son hermosas. Pero no debes elegir mucho. Utilizar no más de dos fuentes en el sitio. Entonces el aspecto de su sitio web será consistente. Una vez que haya elegido sus fuentes, asegúrese de descargar los archivos para cada estilo que usará (normal, negrita, cursiva, etc.).

Ahora que ha seleccionado la fuente adecuada para el sitio, veamos cómo agregarla..

Cómo agregar fuentes personalizadas a WordPress

Hay algunas formas de agregar fuentes a un sitio de WordPress:

  1. Complementos: en este caso, se utilizan diferentes complementos de WordPress para facilitar el proceso.
  2. A mano: con este método, necesita cargar la fuente descargada en el sitio y editar el archivo CSS.
  3. Temas: muchos temas populares incluyen opciones integradas para personalizar sus fuentes (nota: no cubriremos esta opción ya que el proceso variará según el tema que esté utilizando, pero los temas premium de calidad como el tema Total WordPress se ofrecerán en línea documentos que puede seguir fácilmente, como esta guía para agregar fuentes personalizadas a Total)

Opción 1: cambiar las fuentes de WordPress con complementos

Si no nos interesan los cambios globales, podemos instalar complementos de WordPress que cambiarán las fuentes en su sitio.

Características de los complementos de fuente personalizados

El software de código abierto tiene una ventaja para el interés de la comunidad, y WordPress también tiene esta ventaja. Varios complementos de WordPress le permiten agregar fuentes personalizadas. ¿Cómo elegir un complemento adecuado con tantos? ¿Cuáles son las características de los complementos de fuente personalizados??

Aquí hay algunos puntos a tener en cuenta:

  • Posibilidad de usar fuentes personalizadas
  • Posibilidad de utilizar más de una fuente.
  • Encabezados y componentes de destino
  • Bonificación: la capacidad de cambiar la configuración de fuente desde el editor visual

Eso es todo. La primera característica de la lista es muy importante. Siempre puede descargar fuentes de sitios como DaFont, Font Squirrel, etc., pero debe poder cargarlas en WordPress.

Veamos algunos complementos para WordPress que le permiten cargar fuentes personalizadas.

Cargador de fuentes personalizado

Cargador de fuentes personalizado

Este complemento le permite descargar las fuentes de Google y aplicarlas a varios elementos de su blog. Por ejemplo, a los encabezados o cuerpo del artículo o página.

Use cualquier fuente

Use cualquier fuente

Este es un complemento de WordPress que le brinda una interfaz conveniente para descargar fuentes y usarlas directamente a través del editor visual. El editor visual de WordPress puede cambiar automáticamente la fuente de cualquier texto. Este complemento ofrece varias características, lo que hace que el proceso de agregar fuentes personalizadas sea mucho más manejable.

WP Google Fonts

WP Google Fonts

WP Google Fonts le permite usar el catálogo de fuentes de Google. Uno de los sorprendentes beneficios de este complemento es la adición de cerca de 1000 fuentes de Google. Si bien puede poner en cola las fuentes de Google manualmente, es mucho más fácil usar un complemento para la mayoría de los usuarios.

Cómo instalar fuentes con un complemento?

Tomemos, por ejemplo, WP Google Fonts. Simplemente instale este complemento desde el repositorio oficial de WordPress y abra la sección de Fuentes de Google.

WP Google Fonts

Verá un panel de control de fuentes de Google aquí. Elija fuentes y cambie varias configuraciones, como el estilo de fuente, los elementos a los que se aplica, etc..

Opción 2 – Instalar fuentes personalizadas de WordPress manualmente

A través de la directiva @ font-face, puede conectar una o varias fuentes a su sitio. Pero este método tiene sus ventajas y desventajas..

Pros:

  • A través de CSS, puede conectar fuentes de cualquier formato: ttf, otf, woff, svg.
  • Los archivos de fuentes se ubicarán en su servidor; no dependerá de servicios de terceros.

Contras:

  • Para la conexión de fuente correcta para cada estilo, debe registrar un código separado.
  • Sin saber CSS, puede confundirse fácilmente.

Pero no es un problema real si puedes simplemente copie un código terminado y donde necesita especificar sus valores.

Nota: Antes de comenzar, asegúrese de crear un tema secundario para su sitio. De esta manera, puede realizar todas las ediciones en el tema de su hijo, dejando su tema central intacto para que pueda actualizarlo fácilmente según sea necesario en el futuro.

Paso 1: crear una carpeta de “fuentes”

Dentro del tema de su hijo, cree una nueva carpeta de “fuentes” en: wp-content / themes / your-child-theme / fonts

Paso 2. Sube los archivos de fuente descargados a tu sitio web

Esto puede hacerse a través del panel de control de su alojamiento o mediante FTP.

Agregue todos los archivos de fuentes a la carpeta de fuentes recién agregada: wp-content / themes / your-child-theme / fonts tu creaste.

Paso 3. Importar fuentes a través de la hoja de estilo del tema secundario

Abra el archivo style.css de su tema secundario y agregue el siguiente código al comienzo del archivo CSS (después del comentario del tema secundario):

@Perfil delantero{
font-family: 'MyWebFont';
src: url ('fuentes / WebFont.eot');
src: formato url ('fonts / WebFont.eot? #iefix') ('embedded-opentype'),
Formato url ('fuentes / WebFont.woff') ('woff'),
formato url ('fonts / WebFont.ttf') ('truetype'),
formato url ('fonts / WebFont.svg # svgwebfont') ('svg');
peso de fuente: normal;
estilo de fuente: normal;
}

Dónde MyWebFont es el nombre de la fuente, y el valor de la propiedad src (los datos entre paréntesis entre comillas) es su ubicación (enlaces relativos). Necesitamos especificar cada estilo por separado.

Desde que conectamos por primera vez el estilo normal, configuramos las propiedades de peso y estilo de fuente en normal.

Paso 4. Al agregar cursiva, escribe lo siguiente:

@Perfil delantero{
font-family: 'MyWebFont';
src: url ('fuentes / WebFont-Italic.eot');
src: formato url ('fonts / WebFont-Italic.eot? #iefix') ('embedded-opentype'),
Formato url ('fuentes / WebFont-Italic.woff') ('woff'),
Formato url ('fonts / WebFont-Italic.ttf') ('truetype'),
formato url ('fonts / WebFont-Italic.svg # svgwebfont') ('svg');
peso de fuente: normal;
estilo de fuente: cursiva;
}

Donde todo es igual, solo adjuntamos la propiedad de estilo de fuente a cursiva.

Paso 5. Para agregar la fuente en negrita, agregue el siguiente código:

@Perfil delantero{
font-family: 'MyWebFont';
src: url ('fuentes / WebFont-Bold.eot');
src: formato url ('fonts / WebFont-Bold.eot? #iefix') ('embedded-opentype'),
Formato url ('fuentes / WebFont-Bold.woff') ('woff'),
Formato url ('fonts / WebFont-Bold.ttf') ('truetype'),
formato url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
peso de fuente: negrita;
estilo de fuente: normal;
}

Donde establecemos la propiedad de peso de fuente en negrita.

Recuerde indicar la ubicación correcta de los archivos de fuente para cada estilo.

Paso 6. Para conectar negrita y cursiva, escriba lo siguiente:

@Perfil delantero{
font-family: 'MyWebFont';
src: url ('fuentes / WebFont-Italic-Bold.eot');
src: formato url ('fonts / WebFont-Italic-Bold.eot? #iefix') ('embedded-opentype'),
Formato url ('fuentes / WebFont-Italic-Bold.woff') ('woff'),
Formato url ('fuentes / WebFont-Italic-Bold.ttf') ('truetype'),
formato url ('fuentes / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
peso de fuente: negrita;
estilo de fuente: cursiva;
}

Bueno, eso es todo. Ahora ha conectado cuatro estilos de fuente a su sitio web..

Pero hay un comentario: esta conexión de fuente se mostrará incorrectamente en Internet Explorer 8. El consuelo es que todavía hay muy pocas personas que usan IE8.

Finalizar fuentes personalizadas para WordPress

¿Qué es lo primero que notan los usuarios cuando visitan su sitio? Correcto, su diseño! La mayor parte del diseño se basa en el uso adecuado de fuentes hermosas. Por lo tanto, debe cuidar el diseño de la fuente de su sitio. Agregue código o use uno de los complementos mencionados anteriormente para incrustar un nuevo estilo de fuente. La forma en que elijas depende de ti.

Asegúrese de no estar utilizando más de dos fuentes en el mismo sitio. Como cuantas más fuentes personalizadas agregue al sitio, más lenta será la velocidad del sitio.

Eso es todo, no dudes en comentar. 

También nos complacerá saber qué opción elige para agregar una fuente personalizada a su sitio web y dónde puede encontrarla..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map