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

2

25

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'>
Placeman answered 5/9, 2013 at 16:26 Comment(0)
P
35

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
Placeman answered 20/9, 2013 at 0:25 Comment(1)
And if you only need to style the header, you can load even fewer characters: http://fonts.googleapis.com/css?family=Inconsolata&text=MyHeaderDirigible
C
22

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/

Chickaree answered 2/1, 2017 at 23:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.