Typography preview

[Sepremex]

I just started playing with this library, it looks amazing!
Is there away to use custom fonts and have a preview of each font when browsing in the select and when applying it?
Thank you.

[givanz]

Thank you.

If the fonts are already loaded in the page (from css) you can add them to the fonts drop down with

Vvveb.FontsManager.addFontList("theme", "Landing", {
	"Inter": {},
	"Open Sans": {}
});

If you want to dynamically load the fonts when the user selects it then you need to add a font manager, you can check the one used for google fonts https://github.com/givanz/VvvebJs/blob/master/libs/builder/plugin-google-fonts.js as a starting point.

addFont is called then the user selects a font from the list.
removeFont is called when the font is no longer used so you can remove it from the list.

MyFontsManager = {
	removeFont: function (fontName) {
	},
	
	addFont: function (fontName) {
	}
}

Vvveb.FontsManager.addProvider("myfonts", MyFontsManager);

let myFonts = {
	"ABeeZee": {
		"category": "sans-serif",
		"subsets": [
			"latin"
		],
		"variants": {
			"italic": {
				"400": {
				}
			},
			"normal": {
				"400": {
				}
			}
		}
	},
	"Abel": {
		"category": "sans-serif",
		"subsets": [
			"latin"
		],
		"variants": {
			"normal": {
				"400": {
				}
			}
		}
	},
};	

Vvveb.FontsManager.addFontList("myfonts", "My Fonts", myFonts);

Font preview is not implemented as it needs to take into account performace optimizations for large list of fonts.