Cómo añadir fuentes personalizadas a tu sitio de WordPress

Category: Tutorial 11 0

¿Por qué hacer que tu blog sea aburrido usando fuentes estándar? Deja que tu blog hable de tu vibrante personalidad y de los temas que cubres con una amplia variedad de fuentes personalizadas. Las fuentes personalizadas son una buena característica que permite que tu blog tenga un aspecto preferible al de los demás.

Afrontémoslo; a todos nos encantan los blogs y los sitios con las fuentes adecuadas. No sólo decoran el sitio, sino que también ayudan a atraer al usuario a su contenido. Sin embargo, la elección de fuentes estándar de WordPress es limitada y depende del tema que estés usando. La buena noticia es que puedes añadirlas manualmente o con plugins especializados.

Y aquí, surgen dos preguntas – dónde conseguir fuentes personalizadas para WordPress y cómo instalar fuentes personalizadas en tu sitio de WordPress.

Averigüémoslo.

¿Por qué debo usar fuentes personalizadas?

Los días en que Times New Roman y Georgia eran consideradas las únicas fuentes para textos en sitios web. En los últimos años, el espacio de la fuente 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 te da un control total sobre las fuentes de forma predeterminada. Sólo algunos temas eligen apoyar y utilizar fuentes personalizadas.

Por lo tanto, en este post, aprenderás cómo encontrar fuentes personalizadas adecuadas y cómo usarlas en tu sitio de WordPress.

La importancia de usar fuentes personalizadas

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

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

El diseño de la fuente afecta a los lectores, aunque no le presten atención . Abandonar el diseño de la fuente significa abandonar el desarrollo en sí 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 está especificada en el CSS de la página, entonces se utilizará la versión estándar. Siempre se pueden utilizar las fuentes predeterminadas, pero complican el trabajo de los usuarios. Por eso es esencial utilizar una fuente personalizada. Si tu tema no te da opciones para cambiar la fuente, muchos sitios web y herramientas pueden ayudarte.

Alternativas a las fuentes de Google

Where to Find Custom Fonts

Muchos de ustedes conocen las fuentes gratuitas de Google. Hay muchos más sitios donde pueden encontrar hermosas fuentes. Algunas de ellas son gratuitas para uso personal. Si necesitas un uso comercial, entonces necesitas una licencia. Las fuentes de Google y las fuentes de Adobe Edge son gratuitas. Por eso no son tan únicas. Y esto no nos conviene.

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

  1. TemplateMonster – 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 ayudarte a elegir, todas las fuentes se presentan en folletos o marcos. Cada fuente se presenta con una licencia comercial también.
  2. MyFonts – MyFonts ofrece actualmente la mayor selección de fuentes del mundo. Sin embargo, los precios aquí también están en el segmento más alto. Así que, si tienes un presupuesto ajustado, puede que no sea para ti.
  3. FontSpring – Fontspring vende fuentes de fantasía para uso comercial. Pero en casi cualquier familia hay 1 ó 2 fuentes gratuitas que se pueden usar para fines personales. Además, hay una sección separada con fuentes gratuitas. La colección es vibrana. Pero tendrás que estudiar cuidadosamente la información de la licencia de una fuente en particular antes de descargarla.
  4. Cufonfonts – También es una extensa colección de diferentes fuentes. Selecciona cualquiera y verás una página con información detallada sobre ella. Hay muchas fuentes gratuitas, y están divididas en secciones individuales. El sistema de clasificación de CufonFonts es bastante flexible y conveniente. Además, se incluye el soporte de Webfont.
  5. Dafont – Otra colección accesible de 3.500 fuentes gratuitas. La mayoría de ellas están diseñadas sólo para uso personal. Una buena característica de DaFont es el sistema de categorías. Puedes seleccionar fuentes del estilo de los cómics, los videojuegos, vintage o estilizadas como caracteres japoneses.

La elección de las fuentes es muy tentadora porque todas son hermosas. Pero no deberías elegir muchas. No uses más de dos fuentes en el sitio . Entonces el aspecto de tu sitio web será consistente. Una vez que hayas elegido las fuentes, asegúrate de descargar los archivos de cada estilo que vayas a utilizar (normal, negrita, cursiva, etc.).

Ahora que has seleccionado la fuente apropiada para el sitio vamos a averiguar cómo añadirla.

Cómo añadir fuentes personalizadas a WordPress

Hay algunas formas de añadir fuentes a un sitio de WordPress:

  1. Plugins : en este caso, se utilizan diferentes plugins de WordPress para facilitar el proceso.
  2. Manualmente : usando este método, necesitas una fuente descargada subir al sitio y editar el archivo CSS.
  3. Temas : muchos temas populares incluyen opciones incorporadas para personalizar tus fuentes (nota – no cubriremos esta opción ya que el proceso variará en función del tema que estés usando, pero los temas de calidad premium como el tema de Total WordPress ofrecerán documentos en línea que podrás seguir fácilmente – como esta guía para añadir fuentes personalizadas a Total)

Opción 1 – Cambiar las fuentes de WordPress con plugins

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

Características de los plugins de fuentes personalizadas

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

Aquí hay algunos puntos a tener en cuenta:

  • Capacidad de utilizar una fuente personalizada
  • Capacidad de usar más de una fuente
  • Cabezales y componentes del objetivo
  • Bono: la posibilidad de cambiar la configuración de la fuente desde el editor visual

Eso es todo. La primera característica de la lista es muy importante. Siempre puedes descargar fuentes de sitios como DaFont, Font Squirrel, etc., pero tienes que poder subirlas a WordPress.

Veamos algunos plugins para WordPress que permiten subir fuentes personalizadas.

Cargador de fuentes personalizadas

Custom Font Uploader

Ver la demostraciónAprender más & Descargar

Este plugin te permite descargar fuentes de Google y aplicarlas a varios elementos de tu blog. Por ejemplo, a los encabezados o al cuerpo del artículo o de la página.

Use cualquier fuente

Use Any Font

Ver la demostraciónAprender más & Descargar

Este es un plugin de WordPress que te ofrece una cómoda interfaz 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 plugin ofrece varias características, lo que hace que el proceso de añadir fuentes personalizadas sea mucho más manejable.

WP Fuentes de Google

WP Google Fonts

Ver la demostraciónAprender más & Descargar

WP Google Fonts te permite usar el catálogo de fuentes de Google. Uno de los increíbles beneficios de este plugin es la adición de cerca de 1000 fuentes de Google. Mientras que puedes colgar las fuentes de Google manualmente, es mucho más fácil usar un plugin para la mayoría de los usuarios.

¿Cómo instalar fuentes con un plugin?

Tomemos, por ejemplo, las fuentes WP de Google. Sólo instala este plugin del repositorio oficial de WordPress y abre la sección de Fuentes de Google.

WP Google Fonts

Verás un panel de control de fuentes de Google aquí. Elige las fuentes y cambia varios ajustes, como el estilo de la fuente, los elementos a los que se aplica, etc.

Opción 2 – Instalar manualmente las fuentes personalizadas de WordPress

A través de la directiva @font-face, puedes conectar una o varias fuentes a tu sitio. Pero este método tiene sus pros y sus contras.

Pros :

  • A través de CSS, puedes conectar fuentes de cualquier formato: ttf, otf, woff, svg.
  • Los archivos de fuentes estarán localizados en su servidor – no dependerá de los servicios de terceros.

Contras :

  • Para la correcta conexión de la fuente de cada estilo, es necesario registrar un código separado.
  • Sin conocer el CSS, puedes confundirte fácilmente.

Pero no es un verdadero problema si puedes simplemente copiar un código terminado y donde necesitas especificar tus valores.

Nota : Antes de empezar, asegúrese de crear un tema infantil para su sitio. De esta manera puedes hacer todos los cambios en tu tema infantil, dejando tu tema principal intacto para que puedas actualizarlo fácilmente según sea necesario en el futuro.

Paso 1: Crear una carpeta de “fuentes”

Dentro del tema de tu hijo crea una nueva carpeta de “fuentes” bajo: wp-content/themes/your-child-theme/fonts

Paso 2. Sube los archivos de fuentes descargados a tu página web

Esto se puede hacer a través del panel de control de tu hosting o vía FTP.

Añade todos los archivos de fuentes a la carpeta de fuentes recién añadidas: wp-content/themes/your-child-theme/fonts que has creado.

Paso 3. Importar fuentes a través de la hoja de estilos del tema infantil

Abra el archivo style.css del tema infantil y añada el siguiente código al principio del archivo CSS (después del comentario del tema infantil):

@@font-face{ familia de fuentes: MyWebFont; src: url(fonts/WebFont.eot); src: url(fonts/WebFont.eot?#iefix) format(embedded-opentype), url(fonts/WebFont.woff) formato(woff), url(fonts/WebFont.ttf) formato(truetype), url(fonts/WebFont.svg#svgwebfont) format(svg); peso de la fuente: normal; font-style: normal; }

Donde MyWebFon t 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, establecemos las propiedades de peso y estilo de la fuente en normal.

Paso 4. Al añadir cursiva, escribe lo siguiente:

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

Donde todo es igual, sólo que hemos adjuntado la propiedad de estilo de letra a las cursivas.

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

@@font-face{ familia de fuentes: MyWebFont; src: url(fonts/WebFont-Bold.eot); src: url(fonts/WebFont-Bold.eot?#iefix) format(embedded-opentype), url(fonts/WebFont-Bold.woff) format(woff), url(fonts/WebFont-Bold.ttf) formato(truetype), url(fonts/WebFont-Bold.svg#svgwebfont) format(svg); peso de la fuente: negrita; font-style: normal; }

Donde establecemos la propiedad de peso de la fuente en negrita.

Recuerda indicar la ubicación correcta de los archivos de fuentes para cada estilo.

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

@@font-face{ familia de fuentes: MyWebFont; src: url(fonts/WebFont-Italic-Bold.eot); src: url(fonts/WebFont-Italic-Bold.eot?#iefix) format(embedded-opentype), url(fonts/WebFont-Italic-Bold.woff) format(woff), url(fonts/WebFont-Italic-Bold.ttf) format(truetype), url(fonts/WebFont-Italic-Bold.svg#svgwebfont) format(svg); peso de la fuente: negrita; estilo de fuente: cursiva; }

Bueno, eso es todo Ahora has conectado cuatro estilos de fuentes a tu página web.

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

Envolviendo fuentes personalizadas para WordPress

¿Qué es lo primero que notan los usuarios cuando visitan su sitio? ¡Claro, su diseño! La mayor parte del diseño se basa en el uso adecuado de hermosas fuentes. Así que tienes que cuidar el diseño de las fuentes de tu sitio. Añade código o usa uno de los plugins mencionados anteriormente para incrustar un nuevo estilo de fuente. La forma en que lo elijas depende de ti.

Asegúrate de no usar más de dos fuentes en el mismo sitio. Cuanto más fuentes personalizadas añadas al sitio, más lenta será la velocidad del sitio.

Eso es todo, siéntete libre de comentar.

También nos alegrará saber qué opción eliges para añadir una fuente personalizada a tu página web y dónde encuentras tu fuente.

Related Articles