Webfonts

Published Jan 15, 2020. Last updated Nov 17, 2021.

The LucasFonts webfont license

You receive WOFF2 font files to host on your own server.
The license is perpetual with a one-time payment.
The license cost depends on the number of monthly page views of the website you use the fonts on.
Our family rebate applies when you license more styles from the same typeface (super-)family.

Please refer to the full text of the EULA for legally binding information.

How to use webfonts

Static fonts

Upload the WOFF2 files to your web server. Set up the @font-face rules in your CSS to point to the font files as shown below.

Using a single font

If you use just one style, you can use a short version of the @font-face rule. You can choose any family name you like, but make sure not to use the name of any font installed locally on your computer. Otherwise the browser may use that font instead of the requested webfont.

@font-face {
    font-family: 'MyWebFont';
    src: url('/webfonts/TheSansMonoWeb-SCdW4.woff2') format('woff2');
}

You can then request the font in your usual CSS rules:

h2 {
    font-family: 'MyWebFont', monospace;
    font-weight: normal;
}

If you apply the webfont to any element for which the browser uses a bold or italic font style by default, such as <h1>-<h6>, <strong>, or <em>, make sure to reset the weight or style to normal. Otherwise the browser may render the font as fake bold or italic.

Style-linking multiple fonts

You can group multiple fonts under the same family name. In this case, you should fill in the correct, unique combination of font properties for each webfont. These are usually font-style (normal or italic) and font-weight (100 to 900).

This example adds an italic font to the normal font style:

@font-face {
    font-family: 'MyWebFont';
    font-style: normal;
    font-weight: 400;
    src: url('/webfonts/TheSansMonoWeb-SCdW4.woff2') format('woff2');
}

@font-face {
    font-family: 'MyWebFont';
    font-style: italic;
    font-weight: 400;
    src: url('/webfonts/TheSansMonoWeb-SCdW4i.woff2') format('woff2');
}

Variable fonts

Variable fonts contain multiple styles of a typeface family in one file.

@font-face {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 80% 100%;
    font-weight: 200 900;
    src: url('/webfonts/TheSansMonoV.woff2') format('woff2-variations'),
         url('/webfonts/TheSansMonoV.woff2') format('woff2');
}

The ‘font-stretch’ and ‘font-weight’ properties provide a hint to browsers as to what range of variations is provided by this font.

You can then request a specific instance in your CSS:

h2 {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 85%;
    font-weight: 800;

    /* legacy low-level code: */
    font-variation-settings: 'wdth' 85, 'wght' 800;
}

This would produce a slightly narrow, extra bold variation of the typeface like this:

Hello world

Variable fonts with static fallback fonts

The exact syntax for providing variable fonts, and making sure they are loaded by supported browsers, is undergoing changes as work on the CSS fonts module level 4 draft web standard is progressing, but this is what we currently settled on for our own site:

/* First, define the variable font with its own family name */

@font-face {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 80% 100%;
    font-weight: 200 900;
    src: url('/webfonts/TheSansMonoV.woff2') format('woff2-variations'),
         url('/webfonts/TheSansMonoV.woff2') format('woff2');
}

@font-face {
    font-family: 'TheSansMonoWebVar';
    font-stretch: 80% 100%;
    font-style: italic;
    font-weight: 200 900;
    src: url('/webfonts/TheSansMonoV-Italic.woff2') format('woff2-variations'),
         url('/webfonts/TheSansMonoV-Italic.woff2') format('woff2');
}


/* Then define static fallback fonts */

@font-face {
    font-family: 'TheSansMonoWebStatic';
    font-style: normal;
    font-weight: 700;
    src: url('/webfonts/TheSansMonoWeb-SCdW7.woff2') format('woff2');
}

@font-face {
    font-family: 'TheSansMonoWebStatic';
    font-style: italic;
    font-weight: 700;
    src: url('/webfonts/TheSansMonoWeb-SCdW7i.woff2') format('woff2');
}


/* Assign the static fonts first,
   then override with an '@supports' statement */

h2 {
    font-family: 'TheSansMonoWebStatic', 'Consolas', 'Menlo', monospace;
    font-weight: 700;
}

@supports (font-variation-settings: 'wght' 700) {
    h2 {
        font-family: 'TheSansMonoWebVar', 'TheSansMonoWebStatic',
                     'Consolas', 'Menlo', monospace;
        font-stretch: 90%;
        font-weight: 700;

        /* legacy low-level code: */
        font-variation-settings: 'wdth' 90, 'wght' 700;
    }
}

Language:

Colors: