v8.38.0

Add custom fonts to the markup editor

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.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    @import url('https://fonts.googleapis.com/css2?family=Viaoda+Libre');

    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        util: 'annotate',
        markupEditorShapeStyleControls: createMarkupEditorShapeStyleControls({
            fontFamilyOptions: [
                // Add our custom option
                ['Viaoda Libre', 'Viaoda Libre'],

                // Add the default options
                ...createDefaultFontFamilyOptions(),
            ],
        }),
    });
</script>