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>