To ensure support in the older
browsers, we can use fallback fonts for
unsupported browsers by making use of
CSS feature detection.h1 {
font-family: “Source Sans”, sans-
serif;
font-weight: 700;
}@supports (font-variation-settings: normal) {
h1 {
font-family: “Decovar”;
font-variation-settings:
“INLI” 88;
}
}By checking for font-variation-settings
support, we can include our variable
font styles inside the supports CSS
block, ensuring they will only be used in
browsers that can support variable fonts- with our standard fonts used in the
unsupported browsers.
Creative opportunities
If we are able to solve some of our pre-
existing technical problems around
performance, support and fallbacks
we can start to shift our focus – we
no longer need to sacrifice design.
Creativity can drive our choices instead of
considerations of technical limitations.
We can begin to create things that have
never been done with just normal text
and CSS before. Typography is such an
important part of the design process –
with variable fonts our content can drive
our creativity.
We gain more flexibility and granular
control over our typography and designs
that would have placed a heavy burden on
performance or simply been impossible
due to the technical limitations are now
completely possible.
It’s not just that we can create beautiful
or interesting web typography. What
variable fonts demonstrate is that as
developers we can now control the font
lwvhoiĝ1#Zkdw#wklv#phdqv#lv#wkdw#yduldeoh#
fonts can enable typography on the web
to adapt to the flexible nature of screens,
environments and devices.Top: This layout of Maya Angelou’s
Still I Rise uses 11 weights of serif and
sans-serif fonts but is only 226kbAbove: Font weight can be adjusted
based on the viewport width,
allowing finer control over legibilityOpposite: Typography is a vital part
of design – with variable fonts, our
content can drive our creativityFEATURES
Variable fonts