Cómo agregar fuentes personalizadas en sitios web de elementor en 2022

La tipografía es una de las principales preocupaciones para que los diseñadores web coloquen letras y texto de una manera agradable. La tipografía correcta es muy responsable de hacer que toda la estructura de diseño legible, clara y visualmente atractiva para los lectores. “Las fuentes del sitio representan el 90% del diseño”. Elementor En su sitio web de WordPress, puede obtener una colección implícita de más de 800 fuentes incorporadas. Pero la dificultad viene si tiene su propia tipografía personalizada para su marca o si desea dar un aspecto único a su sitio. Bueno, el elementor de la función de fuente personalizada puede salvar su espalda. Le permite agregar diferentes estilos de fuentes personalizadas, dimensiones y variaciones en su sitio web de WordPress.
En el tutorial de hoy, mostraremos cómo puede agregar una fuente a su sitio de WordPress utilizando la función de fuente personalizada Elementer. Característica de fuente personalizada explicada

Personalizado (personalizado) significa algo específico que puede crear o producir de acuerdo con sus deseos o requisitos para un sector en particular. Fuente personalizada Elementor le brinda algunos formatos de fuentes fáciles de verificar. Le permite crear, editar o ajustar efectivamente funciones adicionales que usar fuentes ordinarias o implícitas. Encontrará cinco tipos de formatos de fuente personalizados en su sitio web de Elementor, aquí está:
El formato web de fuentes abiertas (woff) – Woff es el formato más recomendado que se utilizará porque es aceptado por todos los navegadores modernos
El formato web abierto (Woff 2.0) – Font Trurtype u OpenType que ofrece una mejor compresión que Woff 1.0
Fuentes TrueType (TTF) – Esta fuente fue desarrollada a fines de la década de 1980 por Apple y Microsoft
Fuentes/formas SVG: las fuentes SVG permiten que SVG se use como GLIFE al mostrar texto. Asegúrese de utilizar este formato para aceptar las versiones antiguas de Incorporated Optntype iPhone (EOT). Este archivo de fuente funciona en IE, pero no en otros navegadores. Asegúrese de usar este formato para aceptar versiones anteriores de IE
Nota: La Unión Europea agrega una nueva regla al GDPR. Cualquiera que use Google Fonts directamente en su sitio violaría las reglas de GDPR. Y Google mando a ese sitio con 100 euros. Entonces, si tiene fuentes de Google, debe alojarse localmente o puede usar sus propias fuentes personalizadas.
Sin embargo, puede manejar las fuentes de Google de su sitio utilizando el complemento Perfmatters. Consulte la documentación sobre cómo alojar Google Fonts Local en WordPress. Veamos a continuación para averiguar cómo agregar fuentes al sitio web de Elementor: cómo agregar una fuente a los sitios web de Elementor en WordPress
Puede agregar la fuente personalizada de dos maneras simples –

Método 1: Agregar fuente al elemento, incluidos los códigos
Método 2: Use la función de fuente personalizada en Elementor
Si es nuevo en el elemento, consulte este blog en cuestión sobre cómo usar el elemento correctamente.
Método 1: Agregue la fuente al elemento utilizando códigos para ver cómo puede agregar fuentes a su sitio de elementos siguiendo un proceso manual.
Agregue una nueva carpeta “fuentes” a la carpeta de su base a través de un cliente FTP o usando CPanel. La nueva carpeta debe ubicarse en WP-Content/Temas/Fonts
Una vez que haya agregado la nueva carpeta “fuentes”, agregue todos los archivos con fuentes
Ahora, abra la hoja de estilo (style.css) y agregue el siguiente código:@font-facility {font-familia: ‘nameOfNewFont’; Src: url (“/fonts/nameofnewfont.wof2”) format (“woff2”), url (“/fonts/nameofnewfont.wof”) format (“wof”); Font-Weight: Normal; Estilo de fuente: normal; }
Configure los elementos que usen esta fuente agregándolos a la misma hoja de estilo.
Este método puede ser un dolor para los principiantes. Siempre que desee agregar configuraciones como “italiano” o “en negrita”, deberá pasar por el mismo proceso y agregar estos parámetros. Es una gran codificación involucrada.
Para aquellos que no quieren lidiar con este proceso técnico, puede seguir el proceso a continuación para agregar con éxito fuentes personalizadas a su sitio web de Elementor.
Método 2: Use la característica de fuente personalizada de la fuente personalizada es una característica del elemento. Por lo tanto, asegúrese de haber instalado y activado tanto Elementor (gratuito) y Elementor Pro en su sitio Paso 01: Agregue una fuente personalizada en su sitio primero, explore fuentes personalizadas>
Aquí puede crear fuentes personalizadas. Por ejemplo, haga clic en Agregar nou para crear una estructura de fuente personalizada.
Dé un título a su fuente y luego haga clic en Agregar una versión de fuente.

Paso 02: Agregue una variante de fuente y cargue archivos de fuente aquí, puede agregar algunas opciones adicionales a la fuente. Como el peso de la fuente, el estilo y los archivos de fuentes.

Subamos un archivo de fuente TTF personalizado. Para esto, haga clic en el botón Cargar.

Cargue el archivo de fuente desde su dispositivo o desde la carpeta localizada. Nota: ¡Asegúrese de mantener sus archivos de fuentes favoritos en su dispositivo antes de cargarlos aquí! Después de que haya terminado, puede ver los detalles de la fuente aquí.

Siguiendo el mismo proceso, continúe el proceso de carga el archivo de fuente para cada formato. Cargamos otra variante de fuente. Por ejemplo, haga clic en el botón Agregar una variante de fuente y establezca el peso y el estilo de la fuente. Establezca el peso de la fuente en 100 y haga clic en el botón de carga nuevamente.

Una vez que haya cargado el archivo, puede agregarlo desde la galería de medios.

Paso 03: Publique la fuente personalizada final haciendo el mismo proceso, agregue diferentes variantes de fuente a su sitio Una vez que haya terminado, presione el botón Publicar.

Paso 04: use la fuente personalizada para su diseño elemental Ahora puede pensar en cómo usar esta fuente personalizada. ¿Derecha? Veamos cómo encontrar y usar esta fuente personalizada, debe abrir cualquiera de sus páginas elementales en el panel de diseño elemental. Y luego agregue cualquiera de los widgets de texto al panel.

Agregue el widget de heding al panel de edición de elementor.

Después de agregar el widget de texto (título),

Navegue a la sección de estilo
Haga clic en la tipografía

Y aquí puedes encontrar la fuente que acabas de crear anteriormente (mi fuente). Simplemente seleccione la fuente
Una vez que haya agregado la fuente, ahora es el momento de experimentar las otras opciones de impresión para que el texto o la fuente se vea mejor y más atractivo. Como el tamaño de la fuente, el peso, la transformación, el estilo, la decoración, el peso de la línea y muchos más.
Bueno, un diseño extraordinario podría atraer la atención de los clientes que uno simple. Entonces, si desea hacer que el título de su página web sea más inteligente y encantador, la siguiente sección está exactamente allí para usted. Aquí le mostraremos cómo puede estilizar su título usando el texto de complementos felices. Aprendamos cómo diseñar un encabezado elemental Estilice su fuente personalizada con la ayuda del texto de animación de widget complementos felices
Un widget de texto animado es una característica de complementos feliz. Puede hacer que su texto sea tan interesante y atractivo usando este widget genial. Tiene 10 modelos de diseño prefabricados para reducir el esfuerzo y las dificultades adicionales. Por lo tanto, una vez que lo agregue a su panel de diseño elemental, solo debe elegir el aspecto de diseño correcto y personalizarlo de acuerdo con la estructura de su página web. Veamos, prácticamente, cómo puede usar un widget de texto animado en su sitio de WordPress en lugar de un texto o fuente regular.
Para comenzar, debe instalar y activar estos complementos:

Elemento libre

Felices complementos gratis y profesional

Paso 1: agregue el widget de texto animado primero, deslice y coloque el widget en la galería de widgets.
Obtendrá la visualización inicial del widget en la pantalla.
Use el texto de fuente personalizado que creó anteriormente. Para seleccionarlo, toque el botón de estilo, imprima y elija mis fuentes.
Paso 2: Agregue sus modelos de texto ahora toque la sección de contenido nuevamente. Y elija el diseño que más le guste.
Una vez que haya confirmado el diseño, ahora es el momento de ajustar el estilo de animación. Para hacer esto, haga clic en el contenido y encuentre el tipo de animación. Explore cada tipo uno por uno para lograr un mejor resultado para su sitio: retraso en la animación en milisegundos. Min 1000 y Max 30000. Paso 3: consulte el resultado final del texto animado en la página web para ver el resultado final después de personalizar el texto animado en su fuente.

Por lo tanto, el texto animado de widget de complementos felices te ayuda a moderar tus fuentes o texto con una apariencia aburrida. Sin embargo, si desea obtener una presentación detallada de este widget, puede consultar la documentación oficial de este widget. O, para una mejor vista, puede consultar el video tutorial del texto de animación a continuación.

¡Déjame revisar todas las características exclusivas felices!

Algunas preguntas generales sobre fuentes personalizadas de Elementor

¿Cómo agregar Google Fonts a Elementor?

Para hacer esto, vaya a Elementor> Configuración> pestaña avanzada y cambie su carga de fuente de Google a una de las opciones. En el menú Drop -down, seleccione de las siguientes opciones de carga. Por defecto: el navegador define la estrategia de pantalla de fuente. Bloquear: oculta el texto hasta que la fuente esté completamente cargada. Cambie, use una fuente alternativa para la pantalla, hasta que la fuente se haya cargado por completo. Fallback: oculta el texto por un período mínimo y usará la fuente solo si se carga en segundos. Opcional: oculta el texto por un período mínimo y usará la fuente alternativa, a menos que la fuente ya esté completamente cargada.

¿Por qué la fuente funciona no funciona en el elemento? La mayoría de las veces este incidente solo ocurre con los widgets elementales. Pero no en los widgets o en el menú predeterminado. Si ve algo inusual al usar sus fuentes, configure las fuentes elementales en el valor predeterminado. Entonces, la configuración de tipografía podría tomar la iniciativa.
¿Cómo agregar manualmente una fuente a WordPress?
01. 03. y finalmente presione el botón de actualización del archivo para guardar los cambios
¿Cómo agregar fuentes OTF a WordPress?
01. Cargue los archivos de complemento en el directorio/wp -content/plugins/custom -fonts o instale el complemento directamente a través de la pantalla del complemento de WordPress. Fuentes personalizadas, archivos woff2, woff, ttf, eot, otf y svg
¿Cómo agregar una fuente a WordPress sin un complemento?
01. Encuentra la fuente de Google. Se pueden buscar en todas las fuentes de Google 02. Obtenga el inserto en el sitio 03. Ingrese la primera pieza de código en 04. Agregue la segunda pieza del código CSS. El recurso relacionado
¿Estás listo para explorar la función de fuente personalizada Elementor? Las fuentes personalizadas tienen diferentes instalaciones. Desde establecer un estilo de marca único hasta atraer más clientes, las fuentes personalizadas siempre admiten agentes de marketing, diseñadores o propietarios de sitios web. Además de usar las fuentes de Google ordinarias, las fuentes personalizadas podrían ayudar a su negocio en línea a atraer más clientes con su estilo y aspecto únicos. Por lo tanto, esperamos que este tutorial de primaria enriqueciera su conocimiento para usar de manera inteligente las fuentes personalizadas en su sitio web de WordPress. Además, Happy Addons Animated Text Widget lo ayudará a cambiar el texto al siguiente nivel y agregar valor adicional al diseño general. Si le gusta este tutorial, puede suscribirse a nuestro boletín informativo para leer artículos más interesantes, como el tutorial de WordPress, el tutorial elemental, los consejos y los trucos y las últimas actualizaciones.