Adding additional fonts to CKEditor is pretty easy. In this tutorial I am going to show you how to do it.

Create a file and name it fonts.css.

Create a folder and name it fonts.

Once downloaded unzip the font and place it in the fonts folder.

First let's go to Google Fonts and download a font. I am going to get AbrilFatface.

This is the link snippet for Abril AbrilFatface. Place this in your fonts.css file. @font-face { font-family: AbrilFatface; src: local(AbrilFatface), url(../fonts/AbrilFatface.ttf) format('opentype'); // Points to your fonts folder } Now go to your CKEditor folder and open config.js Paste this: config.contentsCss = '../css/fonts.css'; // Where @font-face fonts are stored point to your fonts.css file. config.font_names = 'AbrilFatface/AbrilFatface;' + config.font_names;

To list fonts in alphabetical order start at the bottom and work to the top. These are the fonts I added to the editor below. It's always best to download the fonts.

// Add additional fonts in alphabetical order config.contentsCss = '../css/fonts.css'; // Where @import fonts are stored config.font_names = 'unzialish/unzialish;' + config.font_names; config.font_names = 'Urban/Urban;' + config.font_names; config.font_names = 'traditio/traditio;' + config.font_names; config.font_names = 'Stonehenge/Stonehenge;' + config.font_names; config.font_names = 'SCRIPTIN/SCRIPTIN;' + config.font_names; config.font_names = 'Scotland/Scotland;' + config.font_names; config.font_names = 'Prata/Prata;' + config.font_names; config.font_names = 'Playfair/Playfair;' + config.font_names; config.font_names = 'Petemoss/Petemoss;' + config.font_names; config.font_names = 'Notable/Notable;' + config.font_names; config.font_names = 'Montagu/Montagu;' + config.font_names; config.font_names = 'Monserrat/Monserrat;' + config.font_names; config.font_names = 'Merriweather/Merriweather;' + config.font_names; config.font_names = 'OldEnglishFive/OldEnglishFive;' + config.font_names; config.font_names = 'Lombardic/Lombardic;' + config.font_names; config.font_names = 'Lora-italic/Lora-Italic;' + config.font_names; config.font_names = 'Lora/Lora;' + config.font_names; config.font_names = 'Kings/Kings;' + config.font_names; config.font_names = 'Jomhuria/Jomhuria;' + config.font_names; config.font_names = 'Estonia/Estonia;' + config.font_names; config.font_names = 'Daizen/Daizen;' + config.font_names; config.font_names = 'CormorantGaramond/CormorantGaramond;' + config.font_names; config.font_names = 'Comforterbrush/Comforterbrush;' + config.font_names; config.font_names = 'Calligraffitti/Calligraffitti;' + config.font_names; config.font_names = 'Beforetherain/BeforeTheRain;' + config.font_names; config.font_names = 'Baisley/Baisley;' + config.font_names; config.font_names = 'Arsenal/Arsenal;' + config.font_names; config.font_names = 'Allura/Allura;' + config.font_names; config.font_names = 'AbrilFatface/AbrilFatface;' + config.font_names; config.font_names = 'Abbeyline/abbeyline;' + config.font_names;

Try the fonts in the editor below.

Highlight me to change the font.

I hope this helped you.

To recap:

• Download the font
• Unzip and place it in the fonts folder.
• Add the code snippet to fonts.css
• Add the font to config.js