Use a google font and include only [A-Z] and '&'

Question

Is there a way to use a google font and have it load only [A-Z] and the & ampersand character?

I would like to do this to reduce size and improve load time, since I will only use basic latin numbers and letters.

I can host the font myself if I must and it is legal to manipulate the font package, but am not sure if self-hosting is necessary and how to manipulate google's font package.

I have specified A-Z like this:

http://fonts.googleapis.com/css?family=Inconsolata&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ

but specifying & is troublesome. Both of these don't work:

<link href='http://fonts.googleapis.com/css?family=Inconsolata&text=ABC&amp;' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata&text=ABC&' rel='stylesheet' type='text/css'>

score 32 · Accepted Answer · edited Aug 29 '22 at 08:08

32

There is no way to specify character ranges when including google fonts. The only way to do it is to specify each character like this:

http://fonts.googleapis.com/css2?family=Inconsolata&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ

edited Aug 29 '22 at 08:08

vsync

118,978
58
307
400

answered Sep 20 '13 at 00:25

SimplGy

20,079
15
107
144

3

And if you only need to style the header, you can load even fewer characters: `http://fonts.googleapis.com/css?family=Inconsolata&text=MyHeader` – Michael McGinnis Oct 11 '17 at 08:26

score 19 · Answer 2 · answered Jan 02 '17 at 23:49

19

You can include special characters by url-encoding their UTF-8 representation.

& (U+0026) is 26 in UTF-8, so your url should have:

&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ%26

Here's a handy tool for this: http://www.url-encode-decode.com/

answered Jan 02 '17 at 23:49

Adam Dąbrowski

190
1
5

Use a google font and include only [A-Z] and '&'

2 Answers2

Linked