> Markdown version of [Custom Fonts](https://vaadin.com/docs/v8/framework/themes/themes-fonts). Section index: [llms.txt](https://vaadin.com/docs/v8/framework/llms.txt)

# <a id="themes.fonts"></a>Custom Fonts

In addition to using the built-in fonts of the browser and the web fonts included in the Vaadin themes, you can use custom web fonts.

## <a id="themes.fonts.loading"></a>Loading Local Fonts

You can load locally served web fonts with the font-face mixin as follows:

```
@include font-face('MyFontFamily',
              '../../../../mytheme/fonts/myfontfamily', 400, normal);
```

The first argument is the name of the font family (e.g. 'Helvetica'). The second argument is the path to the font files in the theme folder (prefixed by four double-dots to escape the mixin path), excluding file extension. The third arguments is the font weight (normal, bold, 400, 600, etc). The fourth argument is the style (normal/italic).

The statement must be given in the styles.scss file *outside* the .mytheme {} block, after @import "mytheme.scss" or in a separate stylesheet imported there.

We recommend placing custom font files under a fonts folder in a theme.

Not all browsers support any single font file format, so the base name is appended with .ttf, .eot, .woff, or .svg suffix for the font file suitable for a user’s browser. It is recommended to provide the font in all four formats to support all browsers.

## <a id="themes.fonts.webfonts"></a>Loading Web Fonts

You can load externally served web fonts such as Google Fonts simply by specifying the loading stylesheet for the UI with the @StyleSheet annotation.

For example, to load the "Cabin Sketch" font from Google Fonts:

```
@StyleSheet({"https://fonts.googleapis.com/css?family=Cabin+Sketch"})
public class MyUI extends UI {
    …​
```

## <a id="themes.fonts.using"></a>Using Custom Fonts

After loaded, you can use a custom font, or actually font family, by its name in CSS and otherwise.

```
.mystyle {
    font-family: MyFontFamily;
}
```

If the font family name contains spaces, you need to use single or double quotes around the name.