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 mixin as follows:

  1. @include font(MyFontFamily,
  2.               '../../../../mytheme/fonts/myfontfamily');

The statement must be given in the styles.scss file outside the .mytheme {} block.

The first parameter is the name of the font family, which is used to identify the font. If the font family name contains spaces, you need to use single or double quotes around the name.

The second parameter is the base name of the font files without an extension, including a relative path. Notice that the path is relative to the base theme, where the mixin is defined, not the used theme. 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.

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:

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

Note that such web fonts served from a domain different from the Vaadin application currently do not work together with responsive themes, as described in “Responsive Themes”. The problem occurs only in Firefox. A SecurityError is shown in the debug window.

Using Custom Fonts

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

  1. .mystyle {
  2.     font-family: MyFontFamily;
  3. }

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