Search code examples
cssreactjsfontstinymce

Adding downloaded fonts to TinyMCE

i am using React and I'm trying to integrate TinyMCE into my website. Everything seems to be working fine, the one thing that i'm struggling with is adding custom fonts. The tinyMCE blog on adding custom fonts focus alot on Google fonts but i have a font that i have downloaded.

I don't have many .css files because i'm using tailwind CSS.

Here is the font situated in index.css:

@font-face {
  font-family: "metrischmedium";
  src: url("./assets/fonts/Metrisch-Medium-webfont.eot");
  src: url("./assets/fonts/Metrisch-Medium-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/Metrisch-Medium-webfont.woff2") format("woff2"),
    url("./assets/fonts/Metrisch-Medium-webfont.woff") format("woff"),
    url("./assets/fonts/Metrisch-Medium-webfont.ttf") format("truetype"),
    url("./assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

//among other font imports

What ive tried:

<Editor
            onInit=...
            initialValue="<p>This is the initial content of the editor.</p>"
            init={{
              height: ...,
              menubar: ...,
              plugins: ...,
              font_formats:
                "Metrisch Light = Metrisch-light;Metrisch Medium = metrischmedium",
              toolbar:...,
              menu: ...,
              content_css: "../index.css", //trying to add all fonts in the file.
              content_style:
                "body { font-family:Helvetica,Arial,sans-serif,metrischmedium; font-size:14px }",
            }}
          />

I've also tried importing it in like so:

tinymce.init({
  /* ... */
  content_style:
    "@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');",
});

but it doesn't work as mine is not a url type font.

Solution
    1. Can you try using public/** folder instead of src/** for import of font files in your index.css
    2. Then update your paths for font-face
    @font-face {
  font-family: "metrischmedium";
  src: url("/assets/fonts/Metrisch-Medium-webfont.eot");
  src: url("/assets/fonts/Metrisch-Medium-webfont.eot?#iefix") format("embedded-opentype"),
    url("/assets/fonts/Metrisch-Medium-webfont.woff2") format("woff2"),
    url("/assets/fonts/Metrisch-Medium-webfont.woff") format("woff"),
    url("/assets/fonts/Metrisch-Medium-webfont.ttf") format("truetype"),
    url("/assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium") format("svg");
  font-weight: normal;
  font-style: normal;
}
    1. Now, import index.css in the component where you are using TinyMCE

    When your application is built for production, all the contents of the public directory are usually copied to the build output as-is, making the files available to be served directly.

    Beware of any other file path corrections needed to this change.