<!-- Appears on Tiny Blueprint (https://www.tiny.cloud/blog/) in articles:
 - Add a custom font family in TinyMCE -->
<textarea>
  <h1>Add a custom font family in TinyMCE</h1>
  <p>This instance of TinyMCE has been configured with an additional custom font - Oswald. It's also been set as the default font for the editor.</p>
  <p>For more information, check out our article on Tiny Blueprint: <a href="https://www.tiny.cloud/blog/">Add a custom font family in TinyMCE</a>.</p>
</textarea>
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
tinymce.init({
  selector: 'textarea',
  toolbar: "undo redo | styleselect | fontselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent",
  font_formats: "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Oswald=oswald; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats",
  content_style: "@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); body { font-family: Oswald; }",
  height: 500
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js