Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

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)