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?
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.