search

hupe1980 / gatsby-plugin-webfonts

A Gatsby plugin to handle cdn, base64 and self hosted webfonts
MIT License
55 stars 0 forks source link

Document italic usage #7

Open rdela opened 4 years ago

rdela commented 4 years ago

It would be nice to document how italic usage works, if you point me in the right direction I will make a PR.

Example from gatsby-plugin-google-fonts

So does this plugin work the same way? If I also want the italic versions of the Google Fonts example in the docs, do I specify:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-webfonts`,
      options: {
        fonts: {
          google: [
            {
              family: "Roboto",
              variants: ["300", "300i", "400", "400i", "500", "500i"],
            },
            {
              family: "Open Sans Condensed",
              variants: ["300", "300i", "700", "700i"],
            },
          ],
        },
      },
    },
  ],
};

?

rdela commented 4 years ago

Small update, the pattern above seems to work, however when I tried this:

{
  family: "Karla",
  variants: ["400", "400i", "700", "700i"],
},

All of the italic text in blocks of 400 weight text is 700 weight italic, even if I specify the font-weight on the em element to 400 in CSS. Omitting 700i fixes the problem for 400 weight text but if I also leave out 400i then all of the 400 weight text renders at 700/bold weight even though 400 is specified as the font-weight on the body element. So there may be more than one possibly overlapping issues where:

  1. one cannot use multiple weights of italic with a single font
  2. or multiple weights in passages with italics
  3. or this may be an issue specific to the Karla font and/or the generated CSS for Karla.

For now I am going with: 

{
  family: "Karla",
  variants: ["400", "400i", "700"], // , "700i" - causes confusion
},

As even if I am getting faux bold italic (this is a link to the DDG results page for "webfont faux bold italic", see below for more direct links to articles from these results) it seems the best tradeoff under the circumstances. It may be I am getting some other combination of faux bold or faux italic, though to my eyes everything but bold italic looks correct when compared to the Karla specimen. In the bold italic I see the lack of spacing in the lowercase A that this Smashing article says suggests faux italic:

Because faux italic is created by slanting the original font at an angle, the spaces in the letters get condensed. This is a particular problem in the lowercase “a,” which continues to have two counterforms. Ironically, while faux italic letters feel more squished and are more difficult to read, they often take up more room, and fewer characters fit on a line.

More on faux bold/italic: