Request Specific Letters for Google Fonts

Forum Moderators: phranque

Message Too Old, No Replies

Request Specific Letters for Google Fonts

Jennnnn

5:59 pm on Jan 24, 2018 (gmt 0)

I'm using 3 Google fonts on a site. The last font listed in the font request is only needed for two words in the header.

Google states that you can specify a text=value in the font request URL if you only need a few letters and want to reduce the size of the font file being requested.

When I add the following to the font request:

<link href="https://fonts.googleapis.com/css?family=Open+Sans%7cRaleway:200,100%7cBowlby+One:400&text=Abc%20Defghijkl" rel="stylesheet" type="text/css">

The header looks fine but the H2 text which another Google font doesn't display correctly.

When I put Bowlby+One:400&text=Abc%20Defghijkl on a separate line in a separate request everything works.

Is there a way to add the text=value to Bowlby One and keep the font requests in one line? If not, will using two separate requests add time and counteract the benefit of only requesting a few letters for the Bowlby One font?

Thanks for your help!

lucy24

7:13 pm on Jan 24, 2018 (gmt 0)

Can't you do this kind of thing with @font-face rules in CSS?

.specialfont {font-family: NameHere;}
@font-face {font-family: NameHere; src: url("google-fonts-link-here");}

<h2 class = "specialfont">blahblah</h2>

Sure, two requests takes more time than one request--but the second request to the same host takes much less time than the first request, because the really labor-intensive part is the lookup.

<tangent>
Personally I think third-party fonts living on a different site should be an absolute last resort; is this really the only way to achieve the intended result?
</tangent>

Jennnnn

1:15 am on Jan 25, 2018 (gmt 0)

I Haven't used font@face rules before. From the example you gave it seems like there would still be a render-blocking link which is what I'd like to avoid. I'd love to eliminate the Google fonts (I did eliminate 1 today) so I'd have one less thing to optimize for.

I use Raleway for H1-H3 text. I love the fine, thin readable look. I tried Verdana but the look was too heavy. I would use a default web font if I could achieve a similar effect. The site is about a subject where how things are designed (how things look visually) matters and the general page look is "light".

In contrast, Bowlry One is used for the first line of text in the header. I had Impact but it didn't display the same on small apple devices (possibly Android too - I didn't check). The characters were very thin. Can width be added to preinstalled fonts on small devices by adding that style to the media queries? If so I could use Impact or another Sans Serif font with thickness.

Thanks for your help!

lucy24

4:56 am on Jan 25, 2018 (gmt 0)

Can width be added to preinstalled fonts on small devices by adding that style to the media queries?

Well, you could specify bold--possibly with a tiny bit of added letter-spacing--within your @media rules. But that's really more about device detection than responsiveness as such.

:: pause for obligatory annoyance that the exceedingly useful font-stack site seems to have vanished with a trace, along with its exceedingly useful statistics on which platform is likely to have which fonts available ::

Heavens knows you wouldn't want to add boldface to the ordinary Impact font or it would become unreadable! And if you really want to be intrusive, there's a simple js-plus-css test that would tell you if the user has any specific, named font installed, and then you take action accordingly. (Heh, heh, the things ordinary humans don't know about what a website is doing.)