Answers.Body: <p>I had use the method in one of the <a href="https://www.outsystems.com/forums/discussion/13160/how-to-add-custom-fonts-on-ckeditor/" rel="nofollow noreferrer">forum</a> to add font in ckeditor. I did this by creating an extension and used hook_civicrm_coreResourceList().</p>
  
  <p>Ref: <a href="https://civicrm.org/blog/colemanw/big-changes-to-wysiwyg-editing-in-47" rel="nofollow noreferrer">https://civicrm.org/blog/colemanw/big-changes-to-wysiwyg-editing-in-47</a></p>
  
  <p>HTH</p>
  
  <p>Pradeep</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-15T15:37:55.040Z
Answers.Text: I see, seems a bit much just for adding a font, but I'll try during the week and give feedback. Thanks for the hints, appreciate it!
Answers.UserDisplayName: Phil_B
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-15T15:41:37.053Z
Answers.Text: My pleasure.. cheerz
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-01T09:56:57.767Z
Answers.Text: We did it a bit differently, see my answer below. I think it makes more sense to use the existing configuration option, and deal with them if that makes sense! ;)
Answers.UserDisplayName: Phil_B
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-15T13:20:44.703Z
Answers.LastActivityDate: 2018-01-15T13:20:44.703Z
Answers.UserDisplayName: Pradeep Nayak
Answers.Body: <p>We had some more luck with the integrated UI configuration of CKeditor, and after some trial and error we came up with the following solution:</p>
  
  <p>In the following documentation I will assume that the fonts, files and configurations will be put in /sites/default/files/civicrm/persist/ and /sites/default/files/civicrm/persist/customfonts. The persist folder can be configured for multiple CMSs, I am using drupal.</p>
  
  <p>The configuration file can be configured via the UI at <strong>/civicrm/admin/ckeditor</strong>. Add the fonts plugin on top if not already done.
  Under advanced options add a customConfig, and add a custom configuration file. I would use something like /sites/default/files/civicrm/persist/crm-ckeditor-custom.js</p>
  
  <p>This can be copied and extended from the already generated crm-ckeditor-default.js in the same folder. Be aware that if the path is added, "/" characters will be escaped. Sadly multiple times, so be careful when saving the form!</p>
  
  <p>In the custom configuration you can now add CKEditor configuration, according to their <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config" rel="noreferrer">API documentation</a>.
  For the fonts to be added, a fonts.css file needs to be created, with the default @fontface syntax and the added to the configuration like this:</p>
  
  <pre><code>config.contentsCss = "/sites/default/files/civicrm/persist/customfonts/fonts.css";
  </code></pre>
  
  <p>And the font names needs to be extended as well:</p>
  
  <pre><code>config.font_names = "Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif;Indie Flower/Indie Flower";
  </code></pre>
  
  <p>This is the list of pre-configured fonts, and a new fonts Indie Flower (as an example) is added. The syntax is [Display name]/[Font Name]</p>
  
  <p>Afterwards the directory could look something like this:</p>
  
  <pre><code> sites/default/files/civicrm/persist
    - crm-ckeditor-custom.js
    - customfonts
      - IndieFlower.woff2
      - IndieFlower.woff
      - IndieFlower.ttf
      - IndieFlower.svg
      - IndieFlower.eot
      - fonts.css
  </code></pre>
  
  <p>Then a message template has to be created (civicrm/admin/messageTemplates/add?action=add&amp;reset=1), and the fonts.css has to be included: </p>
  
  <pre><code>&lt;link href="https://my.example.domain/sites/default/files/civicrm/persist/customfonts/fonts.css" rel="stylesheet" /&gt;
  </code></pre>
  
  <p>The webserver needs to be configured as well to allow CORS Header, either by a .htaccess file or for nginx:</p>
  
  <pre><code>&lt;IfModule mod_headers.c&gt;
    &lt;FilesMatch ".(eot|ttf|otf|woff|svg)"&gt;
          Header set Access-Control-Allow-Origin "*"
    &lt;/FilesMatch&gt;
  &lt;/IfModule&gt;
  
  location ~ ^/sites/default/files/civicrm/persist/customfonts/.+\.(eot|ttf|woff|woff2|svg)$ { 
      add_header Access-Control-Allow-Origin "*"; 
  }
  </code></pre>
  
  <p>Then, when creating an Email or a PDF the template has to be selected, and the text can be created by wysiwyg. Email Clients can then load the fonts, and pdf generators can use the fonts.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-02T01:58:47.190Z
Answers.Text: Please see https://github.com/civicrm/civicrm-core/pull/11747 to fix the double-escaping problem. Leave a review on the PR to facilitate us merging the fix into the next release of CiviCRM :)
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-02T15:54:00.000Z
Answers.Text: Excellent news! It seems like it is already being merged? Tim and Seasmus seem to like it! ;)
Answers.UserDisplayName: Phil_B
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-02T17:07:41.757Z
Answers.Text: Yes it got merged. Thanks for identifying that bug.
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-01T09:55:31.577Z
Answers.LastActivityDate: 2018-03-01T09:55:31.577Z
Answers.UserDisplayName: Phil_B
Body: <p>I want to configure the font drop-down menu of the CKEditor and add additional fonts there. </p>
  
  <p>The Fonts are locally available, and shall be usable for PDFLetters etc. Has anyone made any Progress with that? It seems possible to add fonts to CKEditor..?</p>
  
  <p>I found <a href="https://civicrm.stackexchange.com/questions/4523/how-do-i-override-the-default-ckeditor-configuration">this</a> thread, but whenever I edit the GUI Preferences, the file <code>crm-ckeditor-config.js</code> hasn't been generated. Instead only <code>/civicrm/persist/crm-ckeditor-default.js</code> is available. </p>
  
Tags: <4.7><configuration><ckeditor>
Title: Additional Fonts CKEditor
ThreadText: # Additional Fonts CKEditor
  
  (Asked by: username_0 on 2018-01-15)
  
  I want to configure the font drop-down menu of the CKEditor and add additional fonts there.
  
  The Fonts are locally available, and shall be usable for PDFLetters etc. Has anyone made any Progress with that? It seems possible to add fonts to CKEditor..?
  
  I found [this](https://civicrm.stackexchange.com/questions/4523/how-do-i-override-the-default-ckeditor-configuration) thread, but whenever I edit the GUI Preferences, the file `crm-ckeditor-config.js` hasn't been generated. Instead only `/civicrm/persist/crm-ckeditor-default.js` is available.
  
  **Tags:** 4.7, configuration, ckeditor
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_0 on 2018-03-01. Score: 5 | Accepted answer
  
  We had some more luck with the integrated UI configuration of CKeditor, and after some trial and error we came up with the following solution:
  
  In the following documentation I will assume that the fonts, files and configurations will be put in /sites/default/files/civicrm/persist/ and /sites/default/files/civicrm/persist/customfonts. The persist folder can be configured for multiple CMSs, I am using drupal.
  
  The configuration file can be configured via the UI at **/civicrm/admin/ckeditor**. Add the fonts plugin on top if not already done.
  Under advanced options add a customConfig, and add a custom configuration file. I would use something like /sites/default/files/civicrm/persist/crm-ckeditor-custom.js
  
  This can be copied and extended from the already generated crm-ckeditor-default.js in the same folder. Be aware that if the path is added, "/" characters will be escaped. Sadly multiple times, so be careful when saving the form!
  
  In the custom configuration you can now add CKEditor configuration, according to their [API documentation](http://docs.ckeditor.com/#!/api/CKEDITOR.config).
  For the fonts to be added, a fonts.css file needs to be created, with the default @fontface syntax and the added to the configuration like this:
  
  ```
  config.contentsCss = "/sites/default/files/civicrm/persist/customfonts/fonts.css";
  
  ```
  
  And the font names needs to be extended as well:
  
  ```
  config.font_names = "Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif;Indie Flower/Indie Flower";
  
  ```
  
  This is the list of pre-configured fonts, and a new fonts Indie Flower (as an example) is added. The syntax is [Display name]/[Font Name]
  
  Afterwards the directory could look something like this:
  
  ```
   sites/default/files/civicrm/persist
    - crm-ckeditor-custom.js
    - customfonts
      - IndieFlower.woff2
      - IndieFlower.woff
      - IndieFlower.ttf
      - IndieFlower.svg
      - IndieFlower.eot
      - fonts.css
  
  ```
  
  Then a message template has to be created (civicrm/admin/messageTemplates/add?action=add&reset=1), and the fonts.css has to be included:
  
  ```
  <link href="https://my.example.domain/sites/default/files/civicrm/persist/customfonts/fonts.css" rel="stylesheet" />
  
  ```
  
  The webserver needs to be configured as well to allow CORS Header, either by a .htaccess file or for nginx:
  
  ```
  <IfModule mod_headers.c>
    <FilesMatch ".(eot|ttf|otf|woff|svg)">
          Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
  </IfModule>
  
  location ~ ^/sites/default/files/civicrm/persist/customfonts/.+\.(eot|ttf|woff|woff2|svg)$ { 
      add_header Access-Control-Allow-Origin "*"; 
  }
  
  ```
  
  Then, when creating an Email or a PDF the template has to be selected, and the text can be created by wysiwyg. Email Clients can then load the fonts, and pdf generators can use the fonts.
  
  > **Comments:**
  > **username_2**: Please see https://github.com/civicrm/civicrm-core/pull/11747 to fix the double-escaping problem. Leave a review on the PR to facilitate us merging the fix into the next release of CiviCRM :)  
  > **username_0**: Excellent news! It seems like it is already being merged? Tim and Seasmus seem to like it! ;)  
  > **username_2**: Yes it got merged. Thanks for identifying that bug.  
  
  ---
  
  ### Answer by username_1 on 2018-01-15. Score: 1
  
  I had use the method in one of the [forum](https://www.outsystems.com/forums/discussion/13160/how-to-add-custom-fonts-on-ckeditor/) to add font in ckeditor. I did this by creating an extension and used hook\_civicrm\_coreResourceList().
  
  Ref: <https://civicrm.org/blog/colemanw/big-changes-to-wysiwyg-editing-in-47>
  
  HTH
  
  username_1
  
  > **Comments:**
  > **username_0**: I see, seems a bit much just for adding a font, but I'll try during the week and give feedback. Thanks for the hints, appreciate it!  
  > **username_1**: My pleasure.. cheerz  
  > **username_0**: We did it a bit differently, see my answer below. I think it makes more sense to use the existing configuration option, and deal with them if that makes sense! ;)  
  
  ---
  
  