This web site uses drupal 8, the drupal pages refer to drupal 7. Examples will not work, guest login is not enabled.


Using Google fonts

(See also

Google has available many fonts, see Use the button "quick use" , select the variant and the language, and click "@import". Copy the "@import" statement, for example

@import url(;

and place this at the beginning of your css. Use the font like:

body {
        font-family: 'Open Sans', serif;
        font-size: 48px;

In the css page you find a working example: the <h1> and <h2> in this page is done using the Google font "Indie Flower".

Placing font files in your website

If you want to use a font that is available on your website, you can choose between several formats, see It seems that now you can limit yourself using the ".woff" format, but the ".ttf" (format("truetype")) works also.

I find it convenient to place the fonts in the folder "fonts" in the document-root of the website. You refer to that font like:

@font-face {
  font-family: 'MyWebFont';
  src:  url('/fonts/myfont.woff') format('woff');

This website uses the Asenine font for it's headings. See the css of this website.

Conversion to .woff format

If you have your fonts not in a usable format, google up "convert font to woff". There are a number of converters on the web: convert ttf to woff, convert otf and ttf to woff.

Using the fonts in ckeditor

See for a step-by step instruction.


  • Inside the Custom Javascript configuration box, in our case (If you omit the second line, all sizes (8 .. 72) remain available):
config.font_names = 'Arial; Courier; asenine; asenine-very-condensed; asenine-condensed; asenine-wide; Indie Flower'; 
config.fontSize_sizes = '16/16px;24/24px;48/48px';
  • Under "CSS file path" you can enter the name of a css file that contains the "@font-face" statements, in our case for example local.css: