CODEWITHSUNDEEP
javascriptwebfontsgoogle-webfonts
Marian Rick
Marian Rick

Reputation: 3440

Embed only some letters of google webfonts

I am using the Roboto and Roboto Sans webfonts of google. Reading the Google Developers Doc there is a way to only embed certain letters of a whole webfont, using ?text=customletters.

I have generated these two embed links:

<!-- whole roboto font -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<!-- only custom letters of roboto slab using text?= -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700?text=I%20am%20an%20example' rel='stylesheet' type='text/css'>

1) This does not work for me in safari. Is there something wrong with my code?

2) Although, is there a way to combine these two lines, to avoid two requests to another server on each page load?

3) Last and least, does the @import and link href way of embedding make any difference in performance?

JSFIDDLE DEMO

Upvotes: 2

Views: 1579

Answers (2)

h2ooooooo
h2ooooooo

Reputation: 39540

1) This does not work for me in safari. Is there something wrong with my code?

The problem is your GET parameters. A questionmark (?) separates the URL and the GET parameters. Each individual GET parameter is separated with an ampersand (&), though.

You're using two question marks:

https://fonts.googleapis.com/css?family=Roboto+Slab:400,700?text=I%20am%20an%20example
                                ^                          ^

This is wrong as the second one separates the first GET parameter (family) from the second one (text), so use an ampersand instead:

https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&text=I%20am%20an%20example
                                ^                          ^

2) Although, is there a way to combine these two lines, to avoid two requests to another server on each page load?

Google fonts can be split with a | like so:

https://fonts.googleapis.com/css?family=Inconsolata|Roboto
                                                   ^

HOWEVER as you want all the characters in one font and only a few in a second font, then it's not possible. StackOverflow: Optimizing Multiple Google Web Fonts.

3) Last and least, does the @import and link href way of embedding make any difference in performance?

@import blocks parallel downloading.

See StackOverflow: CSS: @import vs. <link href="">

Upvotes: 7

ralf htp
ralf htp

Reputation: 9432

Download the font and use FontForge (https://fontforge.github.io/en-US/), in this thread is a tutorial how to remove characters from a font file?

Upvotes: 0

Related Questions