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

<Meta title="Guides/Assets/Fonts" />

# Fonts

The optimised assets are available under **preply.com** in the formats required by modern and legacy browsers.

Refer to [Create new universal brand fonts](https://preply.atlassian.net/l/cp/0sQoEgGa) for a detailed breakdown of the formats, optimisations and technical decisions.

You should only follow these instructions if Preply Design System is NOT installed (and can not be installed), in the application.

In all other cases follow the [Installation Guides](/story/guides-installation-applications--page).

## Tokyo UI (reBrand) fonts

The Tokyo UI fonts are applied only for descendants of elements with the `data-preply-brand="tokyo"` attribute.

```html
<div data-preply-ds-theme="tokyo-ui">
    <!-- All the children use the new fonts -->
</div>
```

[DES-1108](https://preply.atlassian.net/browse/DES-1108) will fix this.

## Using the assets

First, in the `index.html` file, as close as possible to the start of the `<head>` tag, add:

```html
<!-- Preply Fonts /story/guides-assets-fonts--page -->
<link rel="preconnect" href="https://static.preply.com" />
<link rel="preload" href="https://static.preply.com/ds/global.css" as="style" />
<link
    rel="preload"
    href="https://static.preply.com/ds/fonts/en/PreplyInter.var.woff2"
    as="font"
    type="font/woff2"
    crossorigin
/>
<link rel="stylesheet" href="https://static.preply.com/ds/global.css" />
```

This will make `PreplyInter` available for browsers but not yet apply it to everything on the page. Only text created withing Design System's components will use `PreplyInter` typeface.

Add the following styles as well, also at the top of your cascade, to apply our brand to all the text on the page.

```css
* {
    font-family: 'PreplyInter', sans-serif;
}

@supports (font-variation-settings: normal) {
    * {
        font-family: 'PreplyInterV', sans-serif;
    }
}
```
