Load given characters in a Google font request

Written byPhuoc Nguyen

Tags

CSS, Google Font

Created

21 Mar, 2021

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.

#See also

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Load given characters in a Google font request

#See also

Questions? 🙋

Recent posts ⚡

Newsletter 🔔