Custom Fonts

Plugin de fuentes personalizadas para grapesjs

Este código forma parte de un proyecto más amplio: acerca de Silex v3

Sobre este plugin

Enlaces

• DEMO en Codepen
• Paquete Npm
• Debate sobre los desarrollos en curso

Actualmente, el plugin cuenta con estas funciones

• API para añadir o eliminar fuentes del sitio (del nombre de la fuente de Goole)
• Actualiza el DOM y el desplegable "familia de fuentes"
• Guarda las fuentes con los datos del sitio
• Carga las fuentes cuando se cargue los datos del sitio (añade al DOM al cargar)
• Interfazente para gestionar fuentes
• Integración con la API de Google
• Guarda la lista de fuentes de Google en almacenamiento local para obtener rendimiento y cuotas de API

Limitaciones:

Por ahora, este plugin solo soporta fuentes de Goolge y utiliza la API V2. Debería actualizarse a la V3 y aprovechar las fuentes variables.

Consulta la sección "Desarrollo" que aparece más abajo para contribuir

Motivaciones

Vi debates y problemas como "¿Cómo puedo añadir fuentes personalizadas en el editor de grapesjs? #4563"

Lo que parece funcionar para mí es

1. Actualizar el desplegable "Familia de fuentes"

   const styleManager = editor.StyleManager
   const fontProperty = styleManager.getProperty('typography', 'font-family')
   fontProperty.setOptions(fonts)
   styleManager.render()
   

    

2. actualizar el DOM para mostrar correctamente la fuente: añadir elementos de estilo al editor. Canvas.getDocument()

Esto es bastante fácil, pero estas son las cosas que me llevaron tiempo al implementar Google Fonts

• Usa la API de Google Fonts para seleccionar fuentes y obtener su nombre, variantes y pesos
• compilar la URL de las fuentes para cargar
• la interfaz para gestionar e instalar fuentes