How to add custom fonts

[iam-amanxz]

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?

[kalmahik]

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!

[kalmahik]

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.