function registerFont (widgetId) {
    // Initialize Select2 for font dropdown
    $(`#${widgetId}`).select2({
        theme: "bootstrap-5",
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
    });

    // Populate variant dropdown based on selected font and set 'regular' as default
    function updateVariantOptions() {
        const fontFamily = document.getElementById(widgetId).value;
        if (!fontFamily) {
            return 
        }

        const variantSelect = document.getElementById(widgetId.replace("family", "variant"));
    }

    // Function to update font preview with selected font and variant
    function updateFontPreview() {
        const fontFamily = document.getElementById(widgetId).value;
        const fontUrl = $(`option[value="${fontFamily}"]`).data("url");
        const preview = document.getElementById(widgetId.replace("family", "preview"));
        let fontVariant = document.getElementById(widgetId.replace("family", "variant")).value;

        document.getElementById(widgetId.replace("_family", "")).value = fontUrl;
        preview.style.fontFamily = fontFamily ? `"${fontFamily}", sans-serif` : 'inherit';

        if (fontVariant.includes("italic")) {
            preview.style.fontStyle = "italic";
            fontVariant = fontVariant.replace("italic", "").trim();
        } else {
            preview.style.fontStyle = "normal";
        }

        // Set fontWeight based on the modified fontVariant
        preview.style.fontWeight = fontVariant;
    }

    // Event listeners for dropdown changes
    $(`#${widgetId}`).on("change", function() {
        updateVariantOptions();
        updateFontPreview();
    });
    
    document.getElementById(widgetId.replace("family", "variant")).addEventListener('change', updateFontPreview);

    // Initial setup
    updateVariantOptions();
    updateFontPreview();
}