Variable Fonts?

Variable fonts is the FontzHeaven 😇, an evolution in the world of typography, enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style as a Static font. Variable fonts exist since 2016 and have been adopted by the major browsers, and softwares.

Main cool stuffs variable font offers:

- You can now make motion type on web.
- You can now choose the perfect style you need through all axes.
- You can now have different type classifications into one font.

Since 2018 Pizza has exploring and playing with this new font format.
Our Complete font-family and all the families are deliver with their variable font and the pre-defined statics fonts.

PIZZA CUSTOM INSTANCER™

Our CustomInstancer™ allow you to save one or more customs fonts from the design space of the variable font. So, please, wax the sliders and ride the font! Break your move on a position you love and save it 📸 with 'Save custom' button, use on Print or Digital.
✌️ True fact: you can use our 'Custom instance' generator which produce fonts not contains overlap, really safe for all uses.

TUTORIAL

To play with the font through the axes and have the best rendering of fonts on the web, add theses lines in your css :

DECLARE FONT NAME
@font-face {
font-family: "fontname";
src: url("/fonts/fontname.woff2") format("woff2-variations"),
}

OPTIMIZE LEGIBILITY
body {
-webkit-font-smoothing : antialiased;
text-rendering: optimizeLegibility;
}

CUSTOM FONT IN YOUR DIV
.my-variable-text {
font-family: "fontname";
font-variation-settings: "weight" 123, "ital'0'; (you change the value (123) or (0) with one of your choice according to the value of the variable font's axes)
}

INTERACTION EXAMPLE
For a hover interaction:
.my-variable-text {
font-family: "fontname";
font-variation-settings: "wght" 400;
transition: font-variation-settings 0.3s ease;
}
.my-variable-text:hover {
font-variation-settings: "wght" 700;
}

MOBILE TROUBLES
The mobil browser has h1, h2… styles, so sometimes the font appear in double or more bolder.
Set the font-weight to normal.

h1.my-variable-text {
font-weight: nomral
}

BON APPÉTIT!