Guides
Custom fonts
Add fonts to the Font Family dropdown — the editor lists them, but you load the font files.
Custom fonts
Custom fonts appear in the Font Family toolbar dropdown when you pass their names via
customFontFamilies. The editor lists them but does not load the font files — load them
yourself in the host page:
<!-- Google Fonts (in your host page <head>) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Tajawal:wght@400;700&display=swap"
rel="stylesheet"
/>// Angular
customFonts = ['Cairo', 'Tajawal'];<!-- Angular template — stable array reference, not an inline literal -->
<atelier-editor [customFontFamilies]="customFonts"></atelier-editor>customFontFamilies entries are prepended to the built-in list. fontFamilies replaces the
built-in list entirely.