How to Add Custom Fonts in The WYSIWYG Editor

WYSIWYG is an editor that uses to add HTML code, images, font style, content, etc. WYSIWYG stands for "What You See Is What You Get". Additionally, this editor is specifically used in back-end coding for easy editing. But sometimes it is difficult to work with the editor. That's why today we are back with the solution on How to add custom fonts in the WYSIWYG editor. So let's see the step-by-step guidance.

Magento is the best eCommerce platform that we all know right? But it is also important to choose the right hosting server for your Magento store. Upgrade your hosting server to nexcess or hostinger. They are the most popular ones and provide the best service above all.

How to add custom fonts in the WYSIWYG editor

WYSIWYG allows you to see the preview of the final result in the editing mode and it also suggests the HTML tags at a time of coding. So you do not need to worry about the HTML tags. Although, the default Magento 2 does not come with the WYSIWYG editor with the system configuration. Generally, this editor is used to edit the content on CMS blocks and pages in Magento 2. Therefore here are the steps to add custom fonts in the WYSIWYG editor.

You can add font with several levels :

  1. Directly for special WYSIWYG editor
  2. For all WYSIWYG editors in Magento

We will check both the level solution today.

First, define a new module file-path app/code/Project/Wysiwyg/registration.php

Then, Define module version at app/code/Project/Wysiwyg/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
        <module name="Project_Wysiwyg" setup_version="1.0.0" />
</config>

Then, add a solution for CMS block at app/code/Project/Wysiwyg/view/adminhtml/ui_component/cms_block_form.xml

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="content">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="settings" xsi:type="array">
                            <item name="theme_advanced_fonts" xsi:type="string">Fooo=bar,baz;</item>
                        </item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Now, check the results in the back-end.

Secondly, for all editor is a extension the config model \Magento\Ui\Component\Wysiwyg\ConfigInterface. TinyMCE parameters depend on the Interface. But you can add something using after the extension.

Define app/code/Project/Wysiwyg/etc/di.xml

<?xml version="1.0"?>

<config>
   <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface">
        <plugin name="project_wysiwyg_config"
                type="Project\Wysiwyg\Plugin\Config"
                sortOrder="10"/>
    </type>
</config>

Now, create an extension at app/code/Project/Wysiwyg/Plugin/Config.php

<?php

namespace Project\Wysiwyg\Plugin;

class Config
{
    /**
     * Return WYSIWYG configuration
     *
     * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface
     * @param \Magento\Framework\DataObject $result
     * @return \Magento\Framework\DataObject
     */
    public function afterGetConfig(
        \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,
        \Magento\Framework\DataObject $result
    ) {
        if ($result->getDataByPath('settings/theme_advanced_fonts')) {
            // do not override ui_element config
            return $result;
        }
        $settings = $result->getData('settings');

        if (!is_array($settings)) {
            $settings = [];
        }

        $settings['theme_advanced_fonts'] = 'Baz=foo,bar;Bar Foo=baz,foo;';
        $result->setData('settings', $settings);
        return $result;
    }
}

After that, you can see the result for the CMS page.

That's it.

Wrapping Up

After implementing the above steps define your font lists and then, verify that all the fonts are added to the adminhtml and on the front-end. Hope this article on how to add custom fonts in the WYSIWYG editor. Make sure you have installed the WYSIWYG editor in your Magento store. Feel free to contact us for any queries if you have regarding this. Comment section are all yours.

Happy Coding!