Trouble Adding Custom Font to TinyMCE Editor in Angular - Font Not Appearing in Dropdown

Question

I'm trying to add a custom font (Manrope) to the TinyMCE editor in my Angular project, but the font is not appearing in the fonts dropdown. I've followed the steps outlined in the TinyMCE documentation, including specifying the font in the font_formats and using the @font-face rule in my CSS. The font file is in the correct location, and I don't see any errors in the console. please correct me if i written something wrong. tinymce version : 7.0.0

   //app.component.html
       <editor
  [apiKey]="api_key"
  [init]="{
    height: 500,
    plugins: [
      'a11ychecker',
      'advlist',
      'advcode',
      'advtable',
      'autolink',
      'checklist',
      'export',
      'lists',
      'link',
      'image',
      'charmap',
      'preview',
      'anchor',
      'searchreplace',
      'visualblocks',
      'powerpaste',
      'fullscreen',
      'formatpainter',
      'insertdatetime',
      'media',
      'table',
      'help',
      'wordcount'
    ],
    content_css: '../assets/fonts/customfont.css',
    font_formats: 'Manrope=manrope, sans-serif;',
    toolbar: 'undo redo | casechange blocks | bold italic backcolor | \
      alignleft aligncenter alignright alignjustify | \
      bullist numlist checklist outdent indent | removeformat | a11ycheck code table help'
  }"
></editor>
@font-face {
    font-family:'Manrope';   
    src: url('/assets/fonts/manrope-v15-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

Despite these efforts, the 'Manrope' font is not showing in the TinyMCE editor's fonts dropdown. I was expecting the font to be available for selection in the editor. I've checked the browser console for errors, but there are no issues reported.