Magento – Magento 2 – How to add Font Family in admin panel wysiwyg editor

cms-pageseditorfont familymagento2wysiwyg

enter image description here

Need to add font family in wysiwyg editor.

Best Answer

To do this you need to extend the TinyMCE editor.

Step 1

In file:

magento_dir/lib/web/tiny_mce/themes/advanced/editor_template_src.js

find the line that looks like this and add your font

theme_advanced_fonts : "Custom Font=custom font alias;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif ... ;

Then do the same with this file:

magento_dir/lib/web/tiny_mce/themes/advanced/editor_template.js

theme_advanced_fonts : "Custom Font=custom font alias;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif ... ;

These actions will add fonts to the dropdown menu in the editor.

Then you need to add a fonts file and include it in CSS files using the @font-face rule.

Edit file:

magento_dir/lib/web/tiny_mce/themes/advanced/skins/default/content.css

Add code:

@font-face {
     font-family: 'custom font alias';
     src: url('../../fonts/custom_font_file.ttf');
     font-weight: 300;
     font-style: normal;
}

Then put your font file by this path:

magento_dir/lib/web/tiny_mce/themes/advanced/fonts

It should look like this:

magento_dir/lib/web/tiny_mce/themes/advanced/fonts/custom_font_file.ttf

Step 2

Add font in your custom module to apply the font to the dropdown menu. It makes your font in the dropdown menu look styled.

magento_dir/app/code/Vendor/Module/view/adminhtml/web/css/your-styles-file.css

@font-face {
    font-family: 'custom font alias';
    src: url('../fonts/custom_font_file.ttf');
    font-weight: 300;
    font-style: normal;
}

Also, you need to include the CSS files in the layout:

magento_dir/app/code/Vendor/Module/view/adminhtml/layout/default.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="Vendor_Module::css/your-styles-file.css"/>
</head>

Then put your font file by this path:

magento_dir/app/code/Vendor/Module/view/adminhtml/web/fonts

It should look like this

magento_dir/app/code/Vendor/Module/view/adminhtml/web/fonts/custom_font_file.ttf

Step 3

Then do the same like in Step 2 for the frontend except layout XML file should be default_head_blocks.xml

P.S. If anyone knows how to rewrite TinyMCE files in the custom module without touching it in the lib folder?

Related Topic