← #105 Avoid using CSS @import
#106

Load given characters in a Google font request

Topics: CSS, Google Font

By default, Google font loads the completed font that contains the full set of characters it supports.

There are associations that we only use a Google font for a logo or heading which has specific letters. Instead of downloading the entire font, we can ask Google for downloading a part of it that contains required characters.

We can pass the characters to the text parameter:

<link
href="https://fonts.googleapis.com/css2?family=Sacramento&text=MyHeading"
rel="stylesheet"
type="text/css">

If you want to have Unicode characters, then encode them with their UTF-8 representations. For example tips & tricks are represented as tips+%26+tricks.

Reducing the size of the font file improves the loading time, especially on devices where the network speed is usually limited.

More

Fix a typo or suggest an improvement
#107 Watch a variable's value with live expressions