Para dise?adores web.estilo caligráficoEl estilo y el dise?o son fundamentales. Los tipos de letra adecuados hacen que la página sea más clara, fácil de leer y atractiva. Dependiendo del Elementor La afirmación de que 90% del dise?o web proviene de las fuentes.

existe WordPress Se pueden utilizar más de 800 fuentes por defecto en un sitio web. Sin embargo, si quieres dar a tu sitio web una personalidad de marca, es necesario a?adir fuentes personalizadas, y Elementor proporciona la funcionalidad para cargar y utilizar fuentes personalizadas.

Este artículo describe cómo utilizar Elementor conElementor proUn método completo para a?adir fuentes personalizadas a Elementor. Antes de entrar en detalles, vamos a entender las características de las fuentes y las fuentes de Elementor.

Introducción a las fuentes personalizadas de Elementor

Personalización significa una solución construida para las necesidades individuales, y Elementor soporta la carga de los siguientes cinco formatos de fuente:

• WOFF (Web Open Font Format): bien soportado por los navegadores modernos
• WOFF 2.0: Admite TrueType u OpenType para mayores índices de compresión.
• TTF (fuentes TrueType)Desarrollado por Apple y Microsoft
• Fuentes SVGAdaptable a iPhones antiguos
• EOT (fuentes OpenType incrustadas)Compatible con versiones anteriores de Internet Explorer

Nota: El nuevo reglamento GDPR de la UE establece claramente que cargar fuentes directamente desde Google puede constituir una infracción y dar lugar a una multa. Se recomienda alojar Google Fonts localmente o utilizar fuentes personalizadas.

Se recomienda utilizar el plugin Perfmatters para gestionar localmente las fuentes, que puede configurarse consultando la documentación correspondiente.

Acceso a fuentes personalizadas

Dise?ar sus propias fuentes requiere una amplia gama de conocimientos, como tipografía, codificación de fuentes, conversión de formatos y licencias. Si no dispone de estos conocimientos, puede utilizar fuentes gratuitas o de pago proporcionadas por dise?adores profesionales.

A continuación se enumeran los sitios de descarga de fuentes más utilizados:

• Fuentes Google
• Fuente Ardilla
• FontSpace
• DaFont
• Fundición abierta

Tomemos DaFont como ejemplo, y mostremos los pasos de descarga de la siguiente manera:

Paso 1: Visite DaFont.com para descargar fuentes

Accede al sitio web de DaFont y haz clic en el botón Descargar situado junto a tu fuente favorita.

Paso 2: Descomprima el archivo de fuentes

Descargado como archivo ZIP, descomprímalo antes de utilizarlo.

Elementor sólo admite determinados formatos de fuente y no puede cargar el archivo zip por sí mismo.

Paso 3: Seleccionar los formatos de fuente disponibles

En el archivo descomprimido, busque la inclusión del archivo .ttf u otros Elementor Formatos compatibles. Recuerde este archivo, se utilizará en tutoriales posteriores.

A?adir fuentes a Elementor y Elementor pro

El proceso es diferente entre las dos versiones; la función de fuentes personalizadas que viene con Elementor sólo está disponible en la versión Pro, pero se puede implementar en la versión gratuita con la ayuda de un plug-in.

Método 1: A?adir fuentes personalizadas en Elementor Free Edition

Se recomienda el uso de plug-ins:Fuentes personalizadas tal vez Fuentes Typekit personalizadasLos siguientes son ejemplos de fuentes personalizadas. A continuación se muestran ejemplos de fuentes personalizadas:

Paso 1: Instalar el plugin de fuentes personalizadas

entrar en WordPress En el backend, haz clic en Plugins > A?adir nuevo, busca "Fuentes personalizadas", instálalo y actívalo.

Una vez habilitadas, las fuentes personalizadas aparecerán en el menú Apariencia, haga clic en ellas y, a continuación, en "A?adir nueva fuente".

Paso 2: Cargar y nombrar las fuentes

En la pesta?a Fuentes locales, haga clic en "Elegir archivo" para cargar el archivo. .ttf Archivo de fuentes. Introduzca el nombre de la fuente, por ejemplo "Sunday Grapes".

Puedes a?adir múltiples variantes de fuente y previsualizar el efecto. Haz clic en "Guardar fuente" para guardar la configuración.

Paso 3: Prueba las fuentes en Elementor para ver si funcionan.

Abre cualquier página o artículo y ve al editor de Elementor. Arrastre el componente Encabezado o Editor de texto.

Busque la fuente que acaba de a?adir en Estilo > Tipografía > Familia. Si aparece "Sunday Grapes", la adición se ha realizado correctamente.

Lo mismo puede decirse del plugin Custom Typekit Fonts.

Método 2: A?adir fuentes en Elementor Pro usando las funciones integradas

Prerrequisitos: Activado Elementor pro.

Paso 1: Vaya a la página de gestión de fuentes

Ve a Elementor > Fuentes personalizadas y haz clic en "A?adir nueva" para a?adir una nueva fuente.

Introduzca el nombre de la fuente, por ejemplo "Mi fuente", y haga clic en "A?adir variación de fuente".

Paso 2: Cargar el archivo de fuentes y configurar los parámetros

Seleccione el estilo de fuente, el peso, etc. y haga clic en el botón de carga para a?adir el .ttf Documentación.

Repita la operación para a?adir múltiples variantes. Por ejemplo, establezca el peso en 100 y, a continuación, cargue el archivo correspondiente.

Una vez finalizada la carga, la carga delmediatecaSeleccione el archivo de fuentes en

Paso 3: Publicar fuentes

Una vez finalizada la configuración, haga clic en "Publicar" para publicar la fuente.

Paso 4: Uso de fuentes en páginas Elementor

Vaya a cualquier página y arrastre el componente Texto o Título.

Seleccione la fuente que cargó (por ejemplo, "Mi fuente") en Estilo > Tipografía > Familia.

Puede seguir ajustando el tama?o de la fuente, el estilo, el grosor, la decoración, etc. para crear el efecto visual que desee.

Método 3: Utilizar código para a?adir fuentes manualmente

Adecuado para usuarios con una base de código:

1. existe wp-content/temas/sus-temas/ de nueva construcción bajo fuentes archivo (papel)
2. Cargar archivos de fuentes en este directorio
3. En el tema de style.css A?ada el siguiente código al archivo

@font-face {
font-family: 'MyCustomFont'.
src: url("/fonts/MyCustomFont.woff2") format("woff2"),
url("/fonts/MyCustomFont.woff") format("woff"), url("/fonts/MyCustomFont.woff") format("woff");
font-weight: normal;
font-weight: normal; font-style: normal; }
}

4. existe CSS Se llama a la fuente, por ejemplo

h1, h2 {
font-family: 'MyCustomFont', sans-serif;
}

Si necesita a?adir el estilo cursiva o negrita, deberá a?adir las reglas correspondientes respectivamente.

Resumen de las preguntas más frecuentes

P: Después de a?adir fuentes Elementor ?No disponible en?

Si la fuente es una excepción en el componente Elementor, se recomienda establecer la fuente en Predeterminada y volver a seleccionar la opción Tipografía.

P: ?Cómo a?ado fuentes manualmente en WordPress?

1. Descargue las fuentes y descomprímalas
2. cargar wp-content/temas/tu-tema/fonts
3. existe style.css A?ade una regla de fuente y llama a

P: ?Hay fuentes OTF disponibles?

1. Instale el plugin Fuentes personalizadas
2. Sube los archivos OTF en Apariencia > Fuentes personalizadas
3. Los formatos compatibles son WOFF2, WOFF, TTF, EOT, OTF y SVG.

P: ?Cuáles son los pasos para a?adir fuentes sin plug-ins?

1. Obtener fuentes de Google Fonts
2. Copie el código incrustado
3. palo orilla
4. Llamada a fuentes en archivos de estilo

observaciones finales

Las fuentes personalizadas pueden a?adir personalidad al dise?o de una página y desempe?ar un papel fundamental en la expresión de la marca. Utilizar fuentes personalizadas es una gran opción si las fuentes predeterminadas no satisfacen tus necesidades visuales. Esperamos que este tutorial te haya proporcionado ideas claras y completas sobre cómo hacerlo y te haya ayudado a cargar y aplicar las fuentes.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres