[Drupal] How to add fonts in CK-Editor?
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=dkp9qUXZ
BY chithra.k
7 years ago
Drupal-Technical
0 comments comment

Why do we use CK-Editor? Well, obviously to create customizable contents, right? If you are creating a page, you can change the heading style, color, font-size, font-style etc with the help of CK-Editor. Well,I don't know if you could create your custom color or font-size, but changing default fonts of ckeditor is definitely possible. For that you may follow the below steps:

Step 1 : Create a css that contains the path to the fonts.

For eg: I have a fonts folder in which I have 3 fonts Alegreya-Black, BadScript Regular and BilboSwashCaps.
The structure of my fonts.css is

@font-face {
  font-family: Alegreya-Black;
  src: url('../fonts/ Alegreya-Black.eot');
}
@font-face {
  font-family: BadScript Regular;
  src: url('../fonts/ BadScript Regular.eot');
}
@font-face {
  font-family: BilboSwashCaps;
  src: url('../fonts/ BilboSwashCaps.eot');
}

You may download the fonts from www.google.com/webfonts

Step-2 : Change the CKeditor configuration

  1. Go to admin/config/content/ckeditor
    screen1_0.png
  2. Click on edit against the profile for which you need the fonts .
    screen2.png
  3. Click on Advanced Options
    screen3.png
  4. Inside the Custom Javascript configuration box, add the fonts you want .
    Eg:
    config.font_names ='Alegreya-Black; BadScript-Regular; BilboSwashCaps';
    config.fontSize_sizes = '16/16px;24/24px;48/48px';
  5. After that , you have to tell the ck editor , where are your fonts. For this , go to css option in the edit profile
    fonts.png

    In the css file path field , add the path to your fonts.css . Two Placeholders are available .They are
    %h – host name
    %t – path to theme
    Eg : If your css resides inside your theme's stylesheet folder , You can add the path as %hsites/all/themes/theme_name/stylesheet/fonts.css .

After adding the css path , you can watch your fonts working perfectly!! .


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Add new comment