'Adding custom fonts to drupal CKEDITOR

I have fonts I need to add to the Drupal editor. I've added the @font-face to my stylesheet and then added the fonts to CKEDITOR.config.font_names.

It works but I'm editing a drupel core file (plugin.js) which is bad for many reasons. I wanna do it from my theme. How can it be done?

phpdrupalckeditor


Solution 1:[1]

Here are few steps mentioned in this article.

  • Go to admin/config/content/ckeditor.
  • Click on edit against the profile for which you need the fonts .
  • Click on Advanced Options.
  • Inside the Custom Javascript configuration box, add the fonts you want
  • After that , you have to tell the ck editor , where are your fonts.

https://www.zyxware.com/articles/3692/drupal-how-to-add-fonts-in-ck-editor

Solution 2:[2]

Here are the instructions for Drupal 8/9.

  1. Put font files into your theme/module's directory.
  2. Define new font faces. I would recommend doing it in a separate file e.g fonts.css.
 @font-face {
      font-family: "Font name";
      src: url("../fonts/fontfile.woff2") format("woff2"), url("../fonts/fontfile.woff") format("woff");
    }

  1. Add a library or edit an existing one in your libraries.info file.

    ckeditor_adjustments:
  version: 1.x
  css:
    theme:
      css/fonts.css: {}

  2. Attach library:

    function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'mymodule/ckeditor_adjustments';
}

  3. Go to edit your text format where "Font-family" button is enabled and add new font families under "Font settings" tab and add your font families.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sumit Kumar
Solution 2 ouflak

Related Questions