Open iam-amanxz opened 1 year ago
How can I register custom fonts to the toolbar?
I am trying to import fonts as follows but I can't seem to get this working. However, the font sizes are registering correctly. What am I missing?
Hello! I think I have the same( Were you able to change font size? Thx!
I finally did it!
<QuillEditor
...
defaultFontFamily={customFonts[0].name}
customFonts={customFonts}
/>
const ABCMarfaRegularFontFace = `
@font-face {
font-family: 'ABCMarfa';
src: url('data:font/ttf;charset=utf-8;base64,${ABCMarfaRegularBase64}') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}`;
const ABCMarfaBoldFontFace = `
@font-face {
font-family: 'ABCMarfa';
src: url('data:font/otf;charset=utf-8;base64,${ABCMarfaBoldBase64}') format('opentype');
font-weight: bold;
font-style: normal;
font-display: swap;
}`;
const customFonts = [
{
name: 'ABCMarfa',
css: ABCMarfaBoldFontFace,
},
{
name: 'ABCMarfa',
css: ABCMarfaRegularFontFace,
},
];
Where is ABCMarfaRegularBase64
just base64 string generated from the font file
To have correct bold font on iOS, the font name
and font-family
should be the same, but font-weight
should be different.
I can't make it work without base64, using otf/ttf file.
How can I register custom fonts to the toolbar?
I am trying to import fonts as follows but I can't seem to get this working. However, the font sizes are registering correctly. What am I missing?