Extending Rich Text Editor - custom default google font

Tips and Tricks
#1

Hi all,

Sometimes I need add custom google fonts to form widget richeditor. Just to make better experience for editors. This is how I am adding google font and make it default in RTE.

Add below code into one of your plugin’s Plugin.php file. Edit your fonts as you need and list of fonts as you need.

public function boot()
{
    \Backend\FormWidgets\RichEditor::extend(function($controller) {
        $fontUrl = 'https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap';
        $controller->addCss($fontUrl);
        $controller->editorOptions = [
            'iframeStyleFiles' => [$fontUrl],
            'iframeStyle' => '.fr-element, .fr-view { font-family: "Titillium Web", sans-serif !important; }',
            'fontFamily' => [
                'Titillium Web, sans-serif' => 'Titillium Web',
                'Arial, sans-serif' => 'Arial',
                'Georgia, sans-serif' => 'Georgia',
                'Impact, sans-serif' => 'Impact',
            ],
            'fontFamilyDefaultSelection' => 'Titillium Web',
        ];
        $controller->addCss('/plugins/magnetica/stranky/assets/css/rte-fonts.css');
    });
}

Your rte-fonts.css . Change fonts for default ones you choose in code above.

.fr-element {
  font-family: "Titillium Web", sans-serif !important;
}

.redactor-editor {
  font-family: "Titillium Web", sans-serif !important;
}