Adding Google Fonts to CkEditor

Adding Google Fonts to CKEditor

Adding Google fonts to CKEditor is a straight-forward process that is easily done. In this tutorial I am going to go step-by-step and describe how to do it. We will be downloading the font from Google Fonts.

Step 1:

Create a folder and name it fonts.

Create a file and name it fonts.css and place it in your fonts folder, this is where the import code for Google fonts will be placed.

Step 2:

Go to Google Fonts and download the fonts that you want to use. For this tutorial I will be downloading AbrilFatface.

Step 3:

Once you download your font unzip it and move the .ttf file into the fonts folder.

Now open the fonts.css file and copy/paste the following code into it replacing the font name with the font you downloaded.

The class is abril and if you link to your websites header file and include the font.css file you will see this font.

You may notice that the headers words I used in this tutorial are in the abril class.

Repeat Step 3 for each font.

Step 4: (final)

Go to your ckeditor folder and open the file config.js

Copy/paste the following code into it.

Fonts are displayed in the editor font list from the bottom up. If you want your fonts in alphabetical order then A would be at the bottom of the list of fonts.

When you look at the fonts you added to the editor and if they are not showing the fonts styled then you will need to change the (Where @import fonts are stored).

That's it for the tutorial. When you go to your editor the fonts will be displayed in the font dropdown list and also you should see the fonts style there also.

Check the fonts list below. I added a few more for this tutorial.