Search

Adding custom fonts to the markup font family dropdown.

All default markup editor shapes and styles can be customized. To change the shape style controls we can use the createMarkupEditorShapeStyleControls function and override or extend the defaults.

<link
    href="https://fonts.googleapis.com/css2?family=Viaoda+Libre"
    rel="stylesheet"
/>

<script type="module">
    import {
        openDefaultEditor,
        createMarkupEditorShapeStyleControls,
        createDefaultFontFamilyOptions,
    } from './pintura.js';

    // Get the default font family options
    const defaultFontFamilies = createDefaultFontFamilyOptions();

    const editor = openDefaultEditor({
        src: './my-image.jpeg',

        // Show annotate plugin
        util: 'annotate',

        // Set custom font family options
        markupEditorShapeStyleControls: createMarkupEditorShapeStyleControls({
            fontFamilyOptions: [
                // Add our custom option
                ['"Viaoda Libre"', 'Viaoda Libre'],

                // Add the default options
                ...defaultFontFamilies,
            ],
        }),
    });

    // Show resulting image preview
    editor.on('process', ({ dest }) => {
        const preview = new Image();
        preview.src = URL.createObjectURL(dest);
        document.body.appendChild(preview);
    });
</script>