Vaadin Framework - Themes - Custom Fonts
 Edit This Page

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.

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.

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({"http://fonts.googleapis.com/css?family=Cabin+Sketch"})
public class MyUI extends UI {
    …​

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.