Actually
I've been looking for a way to eliminate the loading of blog fonts. I've done a
lot to overcome blocking rendering of font links or Google font links starting
from defer loading Google font links until using CSS @ font-face. But I still
wonder how to use the font that I think is quite comfortable in the eyes but
efficient loading and CSS.
Actually
to use fonts without loading and efficient CSS, we can use web safe font like
Arial, Georgia, Helvetica, Times New Roman, and others. But unfortunately the
font display does not fit my taste.
And
finally I found a fairly simple and efficacious way to overcome the loading
font and save the CSS font is by using the system font.
Starting
from the limitations of using CSS on AMP requiring maximum CSS size of
50000byte, I racked my brain to continue looking for solutions to reduce CSS
size by reducing CSS @ font-face.
As
we know that CSS @ font-face can have quite a lot of size especially if we use
some kind of font and some kind of font thickness.
However
@ font-face is a way to remove blocking rendering from the use of font links or
Google font links.
Finally
I found a safe way to use fonts other than using web safe font that is by using
system font.
It
turned out that the use of font systems have also been used large web-web like
Github, Bootstrap, and others. But this is not so familiar to the developers
and bloggers.
We
simply add the font-family to the body and on other elements just set the
font-size and font-weight.
font-family
of this font system as follows if applied to the body.
body{font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;}
With
it then the browser will automatically detect the font used by the system of
the device used by the user.
The
explanation is as follows:
●
-apple-system (San Francisco) >> iOS Safari, macOS Safari, Firefox macos
●
BlinkMacSystemFont (San Francisco) >> MacOS Chrome
●
Segoe UI >> Windows
●
Roboto >> Android, Chrome OS
●
Oxygen / Oxygen-Sans >> KDE
●
Ubuntu >> Ubuntu
●
Cantarell >> GNOME
●
Helvetica Neue >> macOS versions <10.11
However,
if the user installs a Roboto font on Windows then in Windows will appear as a
Roboto font.
As
a demo, this blog is already using this font system, the font that appears will
match the font on your device system and you can also check Github, Bootstrap,
or AMP by example.
May
be useful.