4

I'm using the Alegreya font family from Google Fonts in a website. It seems like Google strips out the small-caps font feature, so although Alegreya has small-caps (see below), they don't seem to work with Google Fonts. How can I get true small-caps in this scenario (font from Google Fonts)?

Alegreya has true small-caps (as OpenType feature) in it, and also has a sister small-caps-only family, Alegreya SC. I've downloaded the Regular font from both families (directly from Google Fonts) and compared Alegreya-with-small-caps with Alegreya SC. They are identical, e.g., Alegreya has the same small-caps as its sister. But when I try CSS below:

.variant-smcp {
  font-family: Alegreya, serif; /* Alegreya from Google Fonts */
  font-variant: small-caps; /* should use OpenType smcp feature */
}

I only get fake small-caps (e.g., capitals shrinked by the browser).

A workaround would be to import both Alegreya and Alegreya SC, using the latter without setting any font-variant when needed. But this comes with a big problem for me: it doubles the number of requested fonts. And overall it seems a bit clumsy to import another font just for small-caps, if my font already has these baked in.

Edit: I've also tested using font-feature-settings: "smcp" on;, with exactly same result: fake small-caps, from an smcp-capable font (Alegreya). And I've tested all these things in Firefox 66 (for Windows and for Android), with exactly same result. (Thanks @Parapluie)

José de Mattos Neto
  • 209
  • 2
  • 9
  • I think your workaround is the solution without involving CSS as you'll need the base font and then the other font to sugar the base font. – Even Stensberg Apr 16 '19 at 05:03
  • Really looking for a solution to this one as well. See the discussion here: https://github.com/googlefonts/noto-fonts/issues/1465#issuecomment-653207286 where the google font I'm using is also verified to have small caps, but only fake small caps show up in browsers. – Jon Fergus Jul 07 '20 at 03:06
  • 1
    @JonFergus Google strips out `smcp` font feature in Google Fonts. I found and tested this after trying and failing last year. I don't remember which command I used against fonts (downloaded directly from Google Fonts) to discover that, but perhaps you can use [FontTools](https://github.com/fonttools/fonttools). After all, I'm hosting my own font files, optimized in [Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator), getting less server requests with a little more bytes in total font sizes. – José de Mattos Neto Jul 08 '20 at 20:51

1 Answers1

-1

The answer that you may not want to hear is this: if you want to use Alegreya and Alegreya SC together, then you must load them from separate font files. However, there are ways to mitigate the server load from the additional file.

First, why the separate file: it's a typographic reason. Those small caps are carefully cut to preserve the beauty of the glyph. A pseudo-small-caps merely "shrinks" the larger caps inelegantly and it often comes off as a clumsy-looking kludge.

But this comes with a big problem for me: it doubles the number of requested fonts.

You are left with the same problem a Venetian printer had 550 years ago. If he wanted small caps, he had to purchase and warehouse a full type drawer with 22 lbs of lead characters. Or did he?

If you are using only a few of the glyphs from the small caps font, the possibility exists that you may be able to load a subset of the font to avoid doubling the font glyphs and to reduce your load weight.

To achieve this using the Google Fonts API, after selecting the font, click the "1 Font Selected" tab and choose customize. Here you can reduce the font selection to only the size and languages you require, thereby reducing the file size.

To achieve this using the font loaded from your server, consider using some form of font subsetting tool, as discussed here:

Which Fontfile to use in a website?

Hoping this helps.

Parapluie
  • 714
  • 1
  • 7
  • 22
  • 1
    Thank you, but you didn't addressed what I asked for: as my question says, I already know the difference between true and fake small-caps, and also know that one of the solutions is load two fonts. As my question says, "overall it seems a bit clumsy to import another font just for small-caps, if my font already has these baked in", because today we have OpenType features which address exactly this problem: how to not load different fonts to different font features. Alegreya has the smcp font feature, but it seems Google strips it out when serving fonts. – José de Mattos Neto Apr 21 '19 at 15:53
  • Try `font-feature-settings: "smcp" on;` instead of your `font-variant: small-caps;`. Browser support may be limited. Also, this is an OT feature, and you should ensure that you are using an OT font. Let me know if this helps, and I can edit it into my answer. To *ensure* that it will work across a wider range of browsers, I would encourage you to load the subsetted fonts as I suggest above. (Just my personal preference and strategy.) Careful subsetting will not make the small increase in load time noticeable unless you are serving remote dial-up locations – Parapluie Apr 21 '19 at 22:12
  • Sorry, my question didn't say, but I've already tested using `font-feature-settings: "smcp" on;`, without success (I edited the question). I've also tried `"smcp" 1` and even just `"smcp"`, but that didn't help. In fact, [MDN strongly discourages use of `font-feature-settings` to enable small-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings#Syntax). – José de Mattos Neto Apr 22 '19 at 02:35
  • In my case, subsetting is not that much practical: I'm using small-caps to denote links (inspired by [Butterick's online book](https://practicaltypography.com/small-caps.html)), so the number of glyphs needed is practically the same of base font. Ultimately, this is why I need `font-variant` solution, not another font. – José de Mattos Neto Apr 22 '19 at 02:43
  • Hmm… I think that one way or another, you will be loading an equal number of glyph vectors: the glyphs are either built as separate glyphs within the OT font (though, please don't quote me on that!), or they are loaded as a separate font file. **If your main objective is to lower your load time, and you are not concerned about accurate kerning, then you may want to try this kludge:** (1.) use a programming language to convert your link text string to caps. (i.e. php's `strtoupper`), then (2.) apply a style to lower `font-size` in `ems` so that caps are the height of Alegreya's lowercase 'x'. – Parapluie Apr 22 '19 at 23:08
  • This is an interesting challenge. If you let me know which language you are coding in, I can scratch up some sample code. – Parapluie Apr 22 '19 at 23:09