CODEWITHSUNDEEP
htmlfontsgoogle-webfonts
Jason Duquain
Jason Duquain

Reputation: 31

How to use the text parameter with the google fonts API for just one font type

I am using 2 google font families and have them declared as:

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">

I want to add one font-family (Parisienne) and I only need the ampersand character (&). I understand this can be done using the 'text' parameter (https://developers.google.com/fonts/docs/getting_started).

However if it is possible I want to add it to the existing link tag. I have tried the following:

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700|Parisienne&text=%26&display=swap" rel="stylesheet">

But doing it this way seems to write the logic as "load all 3 font families but just the amperand character for each one". Which is kind of expected but I at least wanted to try it. I tested this and indeed the only character in each font that works/is downloaded is the ampersand

To make it work I have 2 seperate link elements:

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Parisienne&text=%26&display=swap" rel="stylesheet">

Is there any way to use only one link tag and have it load the entire Roboto and Monteserrat families and only the ampersand character of the Parisienne family? If not then having 2 seperate link tags is fine but if there is any way to do this with just one link tag it would be nice to know how.

Upvotes: 3

Views: 1174

Answers (2)

herrstrietzel
herrstrietzel

Reputation: 17195

As explained by Leo the google font API currently doesn't support multiple text parameters in a single query.

Worth noting: The API ignores subsequent query parameters and take the first one:

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&text=Hi&family=Roboto:wght@400;700&text=hamburgefonstiv

Both Montserrat and Roboto are subset to "Hi".

In your specific case you could reduce the number of requests by creating a base64 encoded standalone @font-face rule for "Parisienne".

body {
  font-family: Montserrat;
  font-weight: 700;
  font-size: 5em;
}

/* ampersand subset */
@font-face {
  font-family: Parisienne;
  font-style: normal;
  font-weight: 400;
  src: url("data:font/woff2;base64,d09GMgABAAAAAAR8ABAAAAAAB4gAAAQlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGwwcGAZgADwIAgmCYREICoJUgnELCAABNgIkAwwEIAWEQAcgDAcbiAbIxIf/Tr9zZ1IziztN65mSESrMPKcQ011PF8ZdGEnW+JIzcE5d4FtgIforLR4RVkERCfiLFFBE0sFPelC8SnhdOuPFjo4CARCuqnCTJSOHTLoXpxEKeQXPvUbOQhDAPcqpEMrTTiHyMYa5b7agEKgEpB7IcgyVM895MLRZrNCDIjuk698pIKSLPxdUFAD3TnCy4aDQ5LMBvCtL1BRE42mQCwbbCbjchkCASZIr8HngIwblf1c+g+hiYe3yXYScoTxIAicy89F3hfGHD0mMiJRaxsyMHJEYJzKSL0iMF6mV8VnWTlmnUJWqjkGVWumoe5Bpsqw0vlPWDalKEWXoksfU5G5ZYHpF60UOKUqtxDRFwBqtqsBExzPD46SM+09iQaLrcz67Xe6QmcesZXqzohUEamFPtsvsSbNWUBSJBbcvhlLL1lhqS4GQcHC+xEJzz+iSmV7LoKjqwxKdwDyqqlV1iibgya4PEih8+izGZ1keJJ72j06PTtDiJJ2gExStoJglFia6umSLWSuIXAkEJBBAzDKgE1XwRbatqp6eBJUGdwP8vvj4jQci9rxeLzzvvvtuuOrz+TpFNNn1+/19V8juiD3vW9+vefdd+9Ver9fwht/vJ7tXJNvOv/qTrvkplRGxl+7z+cLVezPnXwQTHp3rbUQv7N7x+MvhqvJXXJ7m9/v9Trf4Z0njku6AscrdWFWs9OiXMizt52Sc0LDaW24Xrsrum7hQPNwsDtW6zIsL+y60dR5zUBpx3bi+dJG+paRNO3uMIas8v9NpGqxaLNoSv3kgf6vO07zz0u6hHvOR7JGK3E+DpdqX8qpy5uwTw+5v7+nvm2ia1zWU7k+zlOd11pTlNVvK5fTipAHuw4Yfphs6mosO15fRXqt+StdiPvnoH5M7Npo80nGln6RIA8/lVc/nHzhQe85IbJyw79hbG090th8EAKxvgMyIOfG6jcMx9b+FRmxG1yslt/57Gte0ecV/k/9ORdlDuiRF2A6i2cKdVhR5/X+T/z4YZd8nYj/IczJguILvRe6PfB4/IQS/IZgHhDs5kIWYJHsohvekQRNWsOqDG0KQiOcRDtF4EOFhxXyr5jcShHTISDAyUf5uNMoBjGIRi5hFLYpQhAUMYB5jmMUieIVYuG4ShZjBPEZQhDZY0Yx2uB3qx7ghTGMaQ5DQSaERLGESoV4MYf4nOBNNUYJCFAfTDVjAIsYwgim4L788gFwY0AYLuuFAHmpBy6c+DVeKYpSgtKaqzGgTZjCLNVKM9LE/RS4GkFdCgKIfa6QwMhTuVoJO6oVqM1UaVXpoBQuYYMnMWm8DaA86UY16bHdzOukhzBMoxABmsC0PIihWMIZFjIL2T7EwhtnLGMIgomBtEdULWStGn8IQKDJ6rso4LkZC4EQkwqePa73mdAA=") format("woff2");
}

.roboto {
  font-family: roboto;
  font-style: normal;
  font-weight: 400;
}

.parisienne {
  font-family: Parisienne;
  font-style: normal;
  font-weight: 400;
  display:inline-block;
  margin-right:-0.2em
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">

<p>Tom <span class="parisienne">&</span> <span class="roboto">Jerry</span></p>

You can use a converter tool like transfonter to get a base64 encoded font source.
You my als o test my own fontkit helper "fontkitty" – Disclaimer: I'm the author. Besides, you would need to encode the ampersand manually as %26 - I need to fix this soon.

Upvotes: 1

Leo
Leo

Reputation: 937

According to Google, the key text counts for the entire request URL. Thus, no way we can achieve that with a single <link>.

Upvotes: 0

Related Questions