Web Pattern Library:

Web Fonts

To properly use the included web fonts in your SCSS code, use one of the provided mixins. This will automatically generate the code necessary to use a Flash of Unstyled Text and avoid the Flash of Invisible Text.

SCSS Mixins for Web Fonts

.my-custom-element {
	@include webfontSansSerif;
}
.my-custom-semibold-element {
	@include webfontSansSerifSemiBold;
}
.my-custom-bold-element {
	@include webfontSansSerifBold;
}

Development Test Cases:

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

abcdefghijklmnopqrstuvwxyz 0123456789

abcdefghijklmnopqrstuvwxyz 0123456789

abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 (Fallback)

abcdefghijklmnopqrstuvwxyz 0123456789 (Fallback)

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

abcdefghijklmnopqrstuvwxyz 0123456789

abcdefghijklmnopqrstuvwxyz 0123456789

abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 (Fallback)

abcdefghijklmnopqrstuvwxyz 0123456789 (Fallback)