Fit Variable Font Test Page

This is a demonstration of Fit’s OpenType Variable Font, a new font format that contains multiple font styles within a single file. This has the potential to improve loading performance and to allow users to access variants that are in between Fit’s ten predefined widths. If your browser doesn’t support it yet, you will still see the default style. See more Fit »

@font-face

@font-face {
    src: url('Fit-VF.woff2') format("woff2"),
         url('Fit-VF.woff') format("woff");
    font-family: FitVF;
}

Fit-VF Animated

Variable

@keyframes animate-fit {
    from {
        font-variation-settings: "wdth" 0;
    }
    to {
        font-variation-settings: "wdth" 1000;
    }
}
            
div {
    font-family: FitVF;
    animation-name: animate-fit;
    animation-direction: alternate; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
}

Fit-VF wdth 0 (Skyline)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 0;
}

Fit-VF wdth 10 (Compressed)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 10;
}

Fit-VF wdth 27 (Extra Condensed)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 27;
}

Fit-VF wdth 56 (Condensed)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 56;
}

Fit-VF wdth 110 (Regular, default style)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 110;
}

Fit-VF wdth 191 (Wide)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 191;
}

Fit-VF wdth 335 (Extra Wide)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 335;
}

Fit-VF wdth 580 (Extended)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 580;
}

Fit-VF wdth 825 (Extra Extended)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 825;
}

Fit-VF wdth 1000 (Ultra Extended)

Variable

div {
    font-family: FitVF;
    font-variation-settings: "wdth" 1000;
}

Links