¿Cómo añado una fuente personalizada en la Tipografía | ¿Desplegable de fuentes?
Así es como añadí nuevas fuentes al gestor de estilos: Llama a estas funciones después de inicializar, o en editor.on('load', ()=> { .... addFonts() ... }) Si usas un preset como el de newsletter que altera el gestor de estilos tras la carga. Además, inyecta las fuentes usadas en el lienzo, usando en la función init l...
Lee la respuesta completa abajo ↓Pregunta
Hola,
Para empezar, esto es lo que llevo mucho tiempo buscando, así que gracias por vuestro esfuerzo.
A continuación, me gustaría añadir una fuente en la sección Tipografía | Lista desplegable. ¿Cómo puedo añadir uno?
Nota: He visto publicaciones donde sugieres añadir una nueva hoja de estilo, pero quiero que solo se aplique según las opciones de Tipografía. También vi que añadiste soporte para 'atRules', pero no creo que esto añada una opción al desplegable de la fuente y tampoco encuentro la documentación sobre ello...
Gracias por vuestro tiempo.
Respuestas (3)
Así es como añadí nuevas fuentes al gestor de estilos: Llama a estas funciones después de inicializar, o en editor.on('load', ()=> { .... addFonts() ... }) Si usas un preset como el de newsletter que altera el gestor de estilos tras la carga.
addFonts = () => {
dejemos styleManager = this.editor.StyleManager;
sea typographySector = styleManager.getSector('Tipografía');
sea fontProperty = styleManager.getProperty('Tipografía', 'font-family');
let list = fontProperty.get('list');
list.push({ valor: 'Roboto, Arial, sans-serif', nombre: 'Roboto' });
fontProperty.set('list', lista);
styleManager.render();
}
Además, inyecta las fuentes usadas en el lienzo, usando en la función init la propiedad de lienzo :
grapesjs.init({
....
lienzo: {
Estilos: ['https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&subset=latín, latín-etc'],
},
....
})
Hola @webnoob actualmente la única forma de hacerlo es añadirlo a través del objeto de inicialización. Aquí tienes un fragmento de la demo https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1045-L1062 Como puedes ver, no especifico ninguna familia de fuentes, solo actualizo su nombre '''js buildProps: ['familia de fuentes', ...], Propiedades:[ { nombre: 'Fuente', propiedad: 'familia de fuentes'}, ...
Las fuentes predeterminadas se toman de su [PropertyFactory](https://github.com/artf/grapesjs/blob/dev/src/style_manager/model/PropertyFactory.js#L415-L431), así que si quieres añadir otras tienes que declararlas todas en init
'''js
buildProps: ['familia de fuentes', ...],
Propiedades:[
{
propiedad: 'familia de fuentes',
nombre: 'Font',
lista: [
{ nombre: 'Arial', valor: 'Arial, Helvetica, sans-serif' }
...
]
},
...
Gracias por esto. Según lo que me has mostrado arriba, he usado el StyleManager para añadir la fuente extra, así:
var styleManager = this.editor.StyleManager
styleManager.addProperty('Typography', {
nombre: 'Fuentes Alternativas',
propiedad: 'familia de fuentes',
tipo: 'select',
Defaults: '',
lista: [{
valor: '',
Nombre: ''
},
{
valor: 'Bank Gothic',
nombre: 'Bank Gothic'
}]
})
Supongo que usando este método tendría que importar la fuente real a través de una hoja de estilo al editor para que funcione realmente, ¿o proporcionáis algún otro mecanismo para eso?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1671
[Pregunta] Añadir html una vez que el canvas esté borrado.
Hola Artur Me gustaría añadir algo de código html por defecto cuando los usuarios pulsen el botón de borrar. Por ejemplo, una sección por d...
Issue #1940
[PREGUNTA] Añadir fuente personalizada
Hola, He revisado los siguientes números de GitHub: #857 #1622 #1215 Casi todos los números, aunque un poco diferentes, ofrecen una forma d...
Issue #1617
[Pregunta] ¿Cómo puedo evitar que el evento de bloquear:arrastrar:inicio? ¿También hay algún evento para escuchar la posición objetivo inválida?
Antes que nada, agradezco mucho vuestras respuestas a mis preguntas. Gracias por todo. Pregunta 1: Tengo una situación en la que, si un blo...
Issue #1543
[Pregunta] Activar la casilla de verificación Traist por defecto
Hola. Soy nuevo en GrapesJs y hasta ahora me está gustando mucho. Pero ahora tengo una pregunta (probablemente para principiantes): ¿Cómo p...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.