Drupal and fonts

Using Google fonts

Google has available many fonts, see https://www.google.com/fonts. How to deal with Google's pages changes with time, but you should be able to get a recipe with "@import" and "font-family"

Copy the "@import" statement, for example

  @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

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

  h1,h2,h3,h4 {
            font-family: 'Indie Flower','Open Sans', serif;
            font-size: 48px;
          }
  h2 { 
     font-size: 36px;
  }
  h3 {
     font-size: 24px;
  }

In this page the above css is applied, hence the funny looking headings.

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');
  }

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
```