import {Meta} from '@storybook/addon-docs/blocks';

<Meta title="Edit/Fonts" />

# Fonts

According the window or container height in which the deck is provided, [DeckDeckGo] will calculate a responsive base font size for the presentation.

If you wish to overwrite this automatic setting, you can provide a custom size by applying a CSS4 variable `--slide-font-size` on the main `<deckgo-deck/>` element.

## Google Fonts

While using the developer kit, the [DeckDeckGo] CLI will prompt you about the optional use of [Google Fonts](https://fonts.google.com), and subsequently will try gathering more information of the required font.

Once all the information accumulated, it will automatically download the fonts, add them to your presentation and even update the settings in the CSS stylesheets for you.

## Example

The following is an example of the process if you would like to install the Google Font `Lato`:

```
? Do you want to use a Google Font for your presentation? (y/N) Y

⠼ Fetching fonts list...

? Search a Google font (min. 3 characters)? ato

? Select the font (Use arrow keys)
  Atomic Age
❯ Lato
  Search again
  Skip

? Select charsets (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ latin
 ◯ latin-ext

? Select styles (Press <space> to select, <a> to toggle all, <i> to invert selection)
  ◯ 100
  ◯ 100italic
  ◯ 300
  ◯ 300italic
 ❯◉ regular
  ◯ italic
  ◯ 700
 (Move up and down to reveal more choices)

⠼ Downloading font
⠼ Writing to CSS files...

```

## Video

Have a look at this video where we show how to do it!

<iframe width="560" height="315" src="https://www.youtube.com/embed/S6qL7JbxJ70" frameBorder="0"></iframe>

[deckdeckgo]: https://deckdeckgo.com
