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.