Using custom fonts in TinyMCE API for editor in django admin

Question

I am trying to use TinyMCE API in Django admin for blog post editing.

It is working flawlessly. However, now I want to add custom fonts to my editor.

As per tinymce

documentation

for adding custom fonts I have followed all steps but still cannot figure out what is wrong.

Step-1: Add fonts as per menu option

admin/base.html:

font_formats:"Andale Mono=andale mono,times; ........ ; Montserrat = Montserrat , sans-serif",`

Step-2: Import fonts in tinymce

admin/base.html:

{% extends "admin/base.html" %}
{% load static %}
{% block footer %}
        tinymce.init({
        ....
        content_css: "{% static "TinyMCE/style.css" %}",
        content_style:"@importurl('https://fonts.googleapis.com/css2family=Montserrat:ital,wght@0,400;0,600;1,400&display=swap');",
        ....
{% endblock %}

TinyMCE/style.css

@import url('https://fonts.googleapis.com/css2family=Montserrat:ital,wght@0,400;0,600;1,400&display=swap');

snapshot:

Step3: Import the font on the page

admin/base.html

{% block extrahead %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400&display=swap');
* {font-family : 'Montserrat', sans-serif;}
</style>
{% endblock %}

snapshot:

Step4: Import the font on any published pages I am using tailwind in my project and my default font is Monstserrat which is perfectly working over the site

style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400&display=swap');
body{
    font-family: Montserrat, sans-serif;
}

Problem:

• Although I see the custom font 'Montserrat' in the dropdown on tincymce editor but when I select it falls back to sans-serf.

You can see the snippet here:

Please note that I am not using django-tinymce package rather tinymce API.

Answer 1

Step-1:

Remove space between fonts

Montserrat=Montserrat,sans-serif

This is because font-family: 'Montserrat' would render correctly and not render with a space font-family: ' Montserrat'. In case of space the font will not load on the browser.

Step-2:

We dont have to specify content_style once we have specified content_css. In some cases it might be useful but there is no point to add both in this case. Plus do add a {% load static %} tag before your script

{% extends "admin/base.html" %}
{% load static %}
{% block footer %}
        {{ block.super }}
        
        {% load static %}
        <script>
        tinymce.init({
        ....
        content_css: '{% static "TinyMCE/style.css" %}',
        ....
{% endblock %}

My problem is solved. Let me know if you have any questions.