2

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

Marian Rick
  • 3,350
  • 4
  • 31
  • 67
  • Why do you only want to load some letters? I don't think that it's for perfomance reasons? – Standard Mar 04 '16 at 13:27
  • Yes it is! I want to implement it to avoid images for SEO reasons, but I only do need 10 letters of the whole font. Saving about 90% of the webfonts size. – Marian Rick Mar 04 '16 at 13:28

2 Answers2

7

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="">

ashleedawg
  • 20,365
  • 9
  • 72
  • 105
h2ooooooo
  • 39,111
  • 8
  • 68
  • 102
  • Thanks a lot, this is a great and clear answer. I had troubles to find the stack threads you have posted, they are very helpful! – Marian Rick Mar 04 '16 at 13:47
  • @MarianRick You're very welcome. The first one was found by Googling `google multiple fonts text` and the second by Googling `link href vs @import`. – h2ooooooo Mar 04 '16 at 13:48
0

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?

Community
  • 1
  • 1
ralf htp
  • 9,149
  • 4
  • 22
  • 34
  • google is much nicer than you are. google lets me download the fonts... https://developers.google.com/fonts/faq – ralf htp Mar 04 '16 at 14:02
  • Got it - "*You can download the fonts to use them for your mockups, in your documents or **to host them on your own server.***". It will still not use the Google CDN, though. – h2ooooooo Mar 04 '16 at 14:05