fonts

Using Google fonts

(See also https://css-tricks.com/snippets/css/using-font-face/)

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

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

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 https://css-tricks.com/snippets/css/using-font-face/. 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 http://www.zyxware.com/articles/3692/drupal-how-to-add-fonts-in-ck-editor for a step-by step instruction.

Remarks:

  • 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:
%t/css/local.css