# Drupal and 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>.
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](https://everythingfonts.com/ttf-to-woff), [convert otf and ttf to woff](http://www.font2web.com/).

## 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](../css):

      %t/css/local.css

