CODEWITHSUNDEEP
javascripttinymcegoogle-fonts
vikrant chauhan
vikrant chauhan

Reputation: 131

How to apply oswald google fonts to tinymce editor as a list in font family dropdown?

How to apply Oswald google fonts to TinyMCE editor as a list in the font-family dropdown in TinyMCE editor?
link of TinyMCE editor is this https://www.tiny.cloud/blog/tinymce-custom-font-family/
Also, you can find my code below, you can directly copy that code and run on your system.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/1p8sxvjggr9uwgjmg51zcebcj0a305xtr2ojec1a01ld7w2i/tinymce/5/tinymce.min.js"
        referrerpolicy="origin"></script>
    <script src="https://raw.githubusercontent.com/blowsie/Pure-JavaScript-HTML5-Parser/master/htmlparser.js"></script>
    <script src=" https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap"
        rel="stylesheet">
    <script>
    tinymce.init({
            selector: '.viktest',
            menubar: false,
            inline: true,
            plugins: 'code textcolor colorpicker emoticons lists',  // note the comma at the end of the line!
            toolbar: 'code fontsizeselect fontselect redo  bold italic  bullist numlist  forecolor backcolor emoticons ',
            powerpaste_word_import: 'clean',
            powerpaste_html_import: 'clean',
            placeholder: "Title goes here",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt",
            "content_style": "@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap'); body { font-family: Oswald-ExtraLight;}",

            "font_formats": "Oswald ExtraLight=oswald-extraLight;Oswald Light=oswald-light;Arial Black=arial black,avant garde; Courier New=courier new,courier; Lato Black=lato; Roboto=roboto;",
        });
    </script>
</head>

<body>
    <div class="demo-inline">
        <div class="container">
            <br>
            <br>
            <div class="viktest"></div>
        </div>
       
    </div>
</body>

</html>

I tried various methods but I was not able to resolve this issue. I checked the TinyMCE editor docs as well but no success. I want the following fonts to be available in the font-family list.

Oswald-Bold Oswald-Light Oswald-Medium Oswald-Regular Oswald-SemiBold

Upvotes: 0

Views: 433

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13726

You are on the right track for getting the font loaded but not in how you apply it to content. I have created a TinyMCE Fiddle that shows how to use this:

https://fiddle.tiny.cloud/C3haab/1

Your code tries to set the body font to a "light" variation of Oswald via this:

body { 
  font-family: Oswald-ExtraLight;
}

...but that is not the name of any font you have imported. You imported something named Oswald. In the Fiddle you will see that if you change the font-family to Oswald that will at least get you using the font you imported:

body {  
  font-family: Oswald;
}

The second question then is how to you use the various weights of the font. That is handled via using CSS via font-weight. In the Fiddle you will see I used style_formats to provide a few different classes you can use to apply font-weights to content in TinyMCE (the classes are defined in the content_style):

style_formats: [
    {title: 'Extra Light Text (class)', inline: 'span', classes: 'extralight'},
    {title: 'Light Text (class)', inline: 'span', classes: 'light'},
    {title: 'Medium Text (class)', inline: 'span', classes: 'medium'},
],

The Fiddle shows this running with some pre-added text that shows some of the various weights of the font in action.

Upvotes: 1

Related Questions