1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
---
title: Custom Fonts
order: 9
layout: page
---
[[themes.fonts]]
= 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.
[[themes.fonts.loading]]
== Loading Local Fonts
You can load locally served web fonts with the [literal]#++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 [filename]#styles.scss# file __outside__ the
[literal]#++.mytheme {}++# block, after [literal]#++@import "mytheme.scss"++# or in a separate stylesheet imported there.
We recommend placing custom font files under a [filename]#fonts# folder in a theme.
Not all browsers support any single font file format, so the base name is
appended with [filename]#.ttf#, [filename]#.eot#, [filename]#.woff#, or
[filename]#.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.
[[themes.fonts.webfonts]]
== 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 [classname]#@StyleSheet#
annotation.
For example, to load the "Cabin Sketch" font from Google Fonts:
[subs="normal"]
----
@StyleSheet({"[replaceable]#http://fonts.googleapis.com/css?family=Cabin+Sketch#"})
public class MyUI extends UI {
...
----
[[themes.fonts.using]]
== 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.
|
