Problema al añadir una fuente personalizada en Grapejs
Haz esto '''js const prop = editor. StyleManager.getProperty ('tipografía', 'familia de fuentes'); prop.set('options', [ {valor: "'Oswald', sans-serif", nombre: 'Oswald'}, ... ]); ``` y nunca deberías hacer esto de 'styleManager.render()'
Lee la respuesta completa abajo ↓Pregunta
@artf He seguido el método de abajo y he añadido con éxito la fuente en la lista, pero no todas las fuentes muestran el comportamiento correcto, quiero añadir la fuente Avenir en el sistema. Cuando las añado, no cambia la fuente a Avenir, sino que le da un valor predeterminado
editor.on('load', function () { styleManager = editor. StyleManager; fontProperty = styleManager.getProperty('Tipografía', 'familia de fuentes'); var list = []; fontProperty.set('list', lista); Lista = [ fontProperty.addOption({value: "'Oswald', sans-serif", nombre: 'Oswald'}), fontProperty.addOption({value: "Helvetica Neue,Helvetica,Arial,sans-serif", nombre: 'Helvetica'}), fontProperty.addOption({value: "sans-serif", nombre: 'sans-serif'}), fontProperty.addOption({value: "Times New Roman", nombre: 'Times New Roman'}), fontProperty.addOption({value: "Arial Black", nombre: 'Arial Black'}), fontProperty.addOption({value: "'Avenir Book', Avenir", nombre: 'Avenir Book'}), fontProperty.addOption({valor: "'Avenir Medium', Avenir", nombre: 'Avenir Medium'}), fontProperty.addOption({value: "'Avenir Roman', Avenir", nombre: 'Avenir Roman'}), fontProperty.addOption({value: "'Montserrat', sans-serif", nombre: 'Montserrat'}), fontProperty.addOption({value: "'Oswald', sans-serif", nombre: 'Oswald'}), fontProperty.addOption({valor: "'Sombras hacia la luz', cursiva", nombre: 'Sombras hacia la luz'}), fontProperty.addOption({value: "'Pacifico', cursivo", nombre: 'Pacifico'}), fontProperty.addOption({value: "Tahoma", nombre: 'Tahoma'}), fontProperty.addOption({value: "Verdana, Geneva, sans-serif", nombre: 'Verdana'}), fontProperty.addOption({value: "Courier New Courier, monospace", nombre: 'Courier New Courier'}), fontProperty.addOption({value: "'Lato', sans-serif", nombre: 'Lato'}), fontProperty.addOption({valor: "'Open Sans', sans-serif", nombre: 'Open Sans'}), fontProperty.addOption({value: "'Montserrat', sans-serif", nombre: 'Montserrat'}), ]; fontProperty.set('list', lista); styleManager.render(); });
_Originally publicado por @hgphpdev en https://github.com/artf/grapesjs/issues/857#issuecomment-443104577_
Respuestas (3)
Haz esto '''js const prop = editor. StyleManager.getProperty ('tipografía', 'familia de fuentes'); prop.set('options', [ {valor: "'Oswald', sans-serif", nombre: 'Oswald'}, ... ]);
y nunca deberías hacer esto de 'styleManager.render()'
Haz esto
'''js const prop = editor. StyleManager.getProperty ('tipografía', 'familia de fuentes'); prop.set('options', [ {valor: "'Oswald', sans-serif", nombre: 'Oswald'}, ... ]);
y nunca deberías hacer esto de 'styleManager.render()'
@artf muchas gracias por esto
He cambiado mi código por este
He conseguido listar las fuentes en el editor como se muestran en la captura de pantalla, Pero quiero añadir un archivo CSS externo para añadir fuente local en el editor. Actualmente estoy usando el siguiente método adjunto en la captura de pantalla.
¿Es el método correcto para importar CSS externo que quiero precargar en el editor? Ahora mismo, cuando selecciono esta fuente Avenir, no cambia a Avenir
es el método correcto para importar CSS externo que quiero precargar en el editor?
Sí, lo estás haciendo bien, deberías verlo. Comprueba que tu fuente se esté cargando correctamente (camino incorrecto, compatibilidad del navegador con .otf, etc.)
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2715
He añadido la fuente personalizada usando el método de abajo, pero esa fuente solo funciona en unos pocos casos
Hay un problema de fuente: cuando hago clic en cualquier elemento no muestra la fuente actual del elemento, añadí código personalizado para...
Issue #3340
GJS-CV-tools en una posición incorrecta cuando pongo grapesjs en un splitpanes
Hola, gracias por tu trabajo. Tengo un problema. Quiero hacer una vista tipo codepen y que la vista de grapesjs sea arrastrable hacia arrib...
Issue #1622
Emisión de fuente seleccionada por defecto para fuente personalizada en la tipografía.
Hay un problema de fuente: cuando hago clic en cualquier elemento no muestra la fuente actual del elemento, añadí código personalizado para...
Issue #857
[Pregunta]: ¿Cómo añado una fuente personalizada en la Tipografía | ¿Desplegable de fuentes?
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 un...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.