¿Has probado alguna vez añadir fuentes personalizadas en un sitio web? ¿No es demasiado complejo? Pues tenemos una buena noticia para ti. Acabamos de lanzar un plugin gratuito para Astra que facilita el uso de fuentes personalizadas. Aquí está su funcionamiento:
Paso 1: Instale el plugin de fuentes personalizadas desde Repositorio de WordPress.
Paso 2: Cargue su archivo de fuentes.
Hemos proporcionado soporte para los siguientes formatos de fuente.
- woff2
- woff
- ttf
- svg
- eot
Le recomendamos que cargue la fuente en tantos formatos como sea posible para que aparezca en todos los navegadores y tenga un aspecto nítido. Para ver la compatibilidad de los navegadores con los distintos tipos de letra, consulte visite esta página.
Paso 3: ¡Hecho!
Una vez que añada la fuente, vaya al personalizador donde podrá ver la fuente que acaba de añadir. Sólo tienes que seleccionar para el elemento que desea aplicar esa fuente para y usted debe ser hecho.
No es necesario ningún código. Planeamos añadir soporte para otros plugins de terceros como Beaver Builder & Elementor en breve. También planeamos proporcionar una API en breve para cualquier otro plugin o temas que podrían querer añadir soporte para este plugin.
Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.
WordPress no permite subir archivos .woff .woff2 .ttf .eot .svg de forma predeterminada, así que ¿cómo se pueden subir utilizando el gestor multimedia?
Al cargar las fuentes personalizadas en el plugin de fuentes personalizadas habilitamos estas cargas de fuentes utilizando las fuentes de WordPress.
Al igual que STRAGULPETE wote, WordPress 4.9.1 no permite subir .woff .woff2 .ttf .eot .svg. He intentado añadir el Mime ttf a wordpress sin éxito 🙁.
Gracias por informar @sbonaime. Le echaremos un vistazo y publicaremos la corrección.
Es un complemento muy útil. ¿Se sabe cuándo estará disponible la compatibilidad con Beaver Builder?
Gracias. No tenemos un plazo de entrega concreto, pero intentaremos hacerlo en cuanto el tiempo nos lo permita 🙂 .
Hola. He subido las fuentes pero solo funcionan si estoy logueado en wordpress? ¿alguna ayuda?
Eso es extraño. Por favor, envíe un ticket de soporte y estaremos encantados de echarle un vistazo.
Acabo de subir y añadir fuentes personalizadas usando Elementor, pero no aparecen en el Personalizador. Hay alguna posibilidad de que empiecen a dar soporte a esto ya que Astra se integra tan bien con Elementor?
Estaría bien no tener que añadir las fuentes personalizadas dos veces con dos sistemas diferentes.
Astra ya tiene un plugin de fuentes personalizadas que funciona también con Elementor Eche un vistazo al plugin Fuentes personalizadas
¡Gracias Nikhil!
Conozco el plugin y sí lo usé, pero creo que el de Elementor funciona mejor 🙂 .
Secundo eso, sería una gran característica para permitir la funcionalidad de fuentes personalizadas de Elementor para trabajar para el personalizador en el tema de Astra Pro sobre todo porque entonces usted no necesita tener un plugin adicional que hace lo mismo.
Hola,
¿es posible añadir diferentes estilos con el complemento de fuentes personalizadas como puedo hacerlo con las fuentes definidas por el usuario de elementor?
Ahora mismo puedes añadir variantes de fuente como una fuente diferente.
Vamos a añadir una opción incorporada para añadir variaciones de fuente en una actualización del plugin.
¿Hay tiempo previsto para la variación de fuentes?
¿hay alguna forma de añadir varios pesos a una familia de fuentes con este plugin?
En este momento tendrás que añadir variantes de font-weight como fuentes separadas y luego podrás usarlas en el plugin. Tenemos en nuestros planes añadir soporte para font-weights al plugin.
¿alguna posibilidad de añadir fuentes a la lista que ya se han cargado a través de css de otra manera (como a través del tema hijo o cualquier otro plugin?)
El plugin no puede detectar otras fuentes que se cargan automáticamente. Usted tendrá que mover manualmente las fuentes personalizadas de código personalizado a este plugin.
Con Gutenberg es facilísimo. Lástima que me maté 3 horas tratando de averiguar cómo hacerlo manualmente antes de darse cuenta de que se hornea a la derecha en Astra. Culpa mía... ¡pero estrella dorada para el tema Astra!
Para obtener todos los archivos de fuentes necesarios para una carga rápida y sencilla, busca "google webfonts helper". Todo el proceso es cuestión de 5 minutos.
Si ya has configurado las fuentes web de Google en los ajustes de tipografía, recuerda volver atrás y cambiarlas por las nuevas versiones alojadas localmente.
Gracias por añadir este consejo Jerud 🙂 .
Sigo sin poder cargar una fuente en la biblioteca multimedia. Hay alguna manera de conseguir que esto funcione?
Por favor, abra un ticket en nuestro centro de asistencia¿para que podamos echar un vistazo y ayudar?
Hola,
Si sólo queremos subir una fuente para usarla sólo en cierto texto, ¿cómo lo haríamos? Cargar la fuente y elegir "Opcional", ¿verdad? Entonces, ¿cuál es el CSS personalizado que tenemos que poner para utilizar esa fuente opcional?
Gracias,
Dan
Hola Dan,
Como mencionamos anteriormente en nuestro post "¡No es necesario ningún código!", por lo que no necesitarás añadir ningún CSS personalizado para poder seguir utilizando esta fuente.
Sólo tienes que subir los archivos de fuentes como los pasos previstos que se mostrará esa opción de fuente en el menú desplegable de la configuración de fuentes Customizer (como por la segunda captura de pantalla anterior).
Digamos que desea aplicar esta fuente personalizada a todas las etiquetas H1 en su sitio, a continuación, sólo tiene que navegar a Personalizador > Global > Tipografía > Encabezados > H1 - aquí, en el menú desplegable de la familia de fuentes, sólo tiene que seleccionar el nombre de su fuente personalizada.
Ya está. Esta fuente será ahora aplicable a todos sus encabezados H1 en su sitio.
Si todavía tiene alguna duda, póngase en contacto con nosotros a través de nuestro Portal de asistencia.
Hola,
He subido archivos de fuentes, pero no se aplica.
¿Cómo puedo solucionar este problema?
Gracias
Hola Park, podríamos echar un vistazo para averiguar qué ha podido causar el problema. Por favor, abre un ticket a través de nuestro portal de asistencia o a través del plugin foro de apoyo.
¿Se ha resuelto alguna vez? Tengo el mismo problema.
¡Hola!
Cuando uso Astra, tengo el error de Page Speed Insights:
Garantizar la visibilidad del texto durante la carga de la fuente web
Aprovecha la función CSS de visualización de fuentes para garantizar que el texto sea visible para el usuario mientras se cargan las fuentes web.
estrella.woff
¿Cómo evitar que se cargue esta fuente?
Simplemente no quiero existir en el sitio web.
Gracias.