Pintura Image Editor v8.78.1

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.

index.html

<!DOCTYPE html>

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

<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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    getEditorDefaults,
    createDefaultFontFamilyOptions,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                util={'annotate'}
                markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls(
                    {
                        fontFamilyOptions: [
                            // Add our custom option
                            ['Viaoda Libre', 'Viaoda Libre'],

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

export default App;

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

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            util="annotate"
            :markupEditorShapeStyleControls="markupEditorShapeStyleControls"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    getEditorDefaults,
    createDefaultFontFamilyOptions,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            markupEditorShapeStyleControls:
                createMarkupEditorShapeStyleControls({
                    fontFamilyOptions: [
                        // Add our custom option
                        ['Viaoda Libre', 'Viaoda Libre'],

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

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        getEditorDefaults,
        createDefaultFontFamilyOptions,
        createMarkupEditorShapeStyleControls,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        util={'annotate'}
        markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls({
            fontFamilyOptions: [
                // Add our custom option
                ['Viaoda Libre', 'Viaoda Libre'],

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

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

    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import {
    getEditorDefaults,
    createDefaultFontFamilyOptions,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    markupEditorShapeStyleControls: any = createMarkupEditorShapeStyleControls({
        fontFamilyOptions: [
            // Add our custom option
            ['Viaoda Libre', 'Viaoda Libre'],

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

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    util="annotate"
    [markupEditorShapeStyleControls]="markupEditorShapeStyleControls"
></pintura-editor>

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

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultFontFamilyOptions,
            createMarkupEditorShapeStyleControls,
        } = $.fn.pintura;

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

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