Font Face(SCSS)

Provides the @font-face CSS rules needed to use the Mark font in weights 400 and 700.

Consumers of this package must provide a $thumbprint-font-url variable that points to a URL that can load the fonts. Here’s a basic example:

$thumbprint-font-url: 'https://example.com/path/';
@import '~@thumbtack/thumbprint-font-face';

Thumbtack fonts are only available for internal use. Please contact the Design Systems team if you would like access.

You can then reference the font-family with Thumbprint Tokens:

.my-element {
    font-family: $tp-font-family__base;
}

…which outputs the following CSS:

.my-element {
    font-family: Mark, Avenir, Helvetica, Arial, sans-serif;
}