Local Italic Fonts are Not Being Loaded

[simmonsr]

I have 6 fonts I want to load via gantry/theme.yaml:

Only the 3 non-italic fonts load as Font-Face via @include import-font:

@font-face {
  font-family: "lato";
  font-style: normal;
  font-weight: 400;
  src: url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-regular-webfont.eot#iefix') format("embedded-opentype"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-regular-webfont.woff2') format("woff2"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-regular-webfont.woff') format("woff"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-regular-webfont.ttf') format("truetype"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-regular-webfont.svg#lato') format("svg");
}
@font-face {
  font-family: "lato";
  font-style: normal;
  font-weight: 700;
  src: url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-bold-webfont.eot#iefix') format("embedded-opentype"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-bold-webfont.woff2') format("woff2"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-bold-webfont.woff') format("woff"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-bold-webfont.ttf') format("truetype"), url('../../../../../themes/g5_vermilion/common/fonts/lato/lato-bold-webfont.svg#lato') format("svg");
}
@font-face {
  font-family: "latolight";
  font-style: normal;
  font-weight: 400;
  src: url('../../../../../themes/g5_vermilion/common/fonts/latolight/lato-light-webfont.eot#iefix') format("embedded-opentype"), url('../../../../../themes/g5_vermilion/common/fonts/latolight/lato-light-webfont.woff2') format("woff2"), url('../../../../../themes/g5_vermilion/common/fonts/latolight/lato-light-webfont.woff') format("woff"), url('../../../../../themes/g5_vermilion/common/fonts/latolight/lato-light-webfont.ttf') format("truetype"), url('../../../../../themes/g5_vermilion/common/fonts/latolight/lato-light-webfont.svg?5c49e930#latolight') format("svg");
}

Same happens in Helium demo (and all the rest of our RT themes for that matter). None of the Italic fonts are being loaded: http://gantrydemo-18af.kxcdn.com/user/data/gantry5/themes/g5_helium/css-compiled/helium_home_-_particles.css

[mahagr]

@simmonsr @newkind What is the status of this one?

[simmonsr]

In case anyone is interested, italic fonts should just be loaded as separate font in gantry/theme.yaml. For example:

 fonts:
    lato:
      400: 'gantry-theme://fonts/lato/lato-regular/lato-regular-webfont'
      700: 'gantry-theme://fonts/lato/lato-bold/lato-bold-webfont'
    lato-italic:
      400: 'gantry-theme://fonts/lato/lato-italic/lato-italic-webfont'
      700: 'gantry-theme://fonts/lato/lato-bolditalic/lato-bolditalic-webfont'
    lato-light:
      400: 'gantry-theme://fonts/lato-light/lato-light/lato-light-webfont'
    lato-light-italic:
      400: 'gantry-theme://fonts/lato-light/lato-light-italic/lato-lightitalic-webfont'

[N8Solutions]

@simmonsr Are you sure that is correct? Not to question your judgement but the reason I'm asking is because I implemented this over a year ago using the Lato font with no problem as outlined in the Gantry documentation here on one of my sites. The site is using the RT Photon theme. See the first sentence at the top in the privacy policy. It's in italics.

In the /gantry/theme.yaml file I have this.

    Lato:
      900italic: 'gantry-theme://fonts/lato/lato-blackitalic/lato-blackitalic-webfont'
      900: 'gantry-theme://fonts/lato/lato-black/lato-black-webfont'
      700italic: 'gantry-theme://fonts/lato/lato-bold/lato-bolditalic-webfont'
      700: 'gantry-theme://fonts/lato/lato-bold/lato-bold-webfont'
      400italic: 'gantry-theme://fonts/lato/lato-italic/lato-italic-webfont'
      400: 'gantry-theme://fonts/lato/lato-regular/lato-regular-webfont'
      200italic: 'gantry-theme://fonts/lato/lato-lightitalic/lato-lightitalic-webfont'
      200: 'gantry-theme://fonts/lato/lato-light/lato-light-webfont'

in the custom.scss file I added this:

@include import-font('lato');

In the Base Outline under Styles I am able to select the Lato font and the Italic versions are also present in the font picker.

[simmonsr]

But look at your source code:

https://www.n8solutions.host/media/plg_jchoptimize/assets3/gz/0/b3fcf07f3220356dbe88fc05eb074de9.css

Search for font face (or the lato-italic, etc.) and you will see that neither lato-bolditalic, lato-lightitalic, or lato-italic-webfont are loading.

[N8Solutions]

@simmonsr I see what you are saying. Even though I can change the styling by adding font-style: italic; and changing the font-weight to 900 for Ultra Bold or 200 for Light, the text looks similar but not exact. So if we add the fonts the way you have specified above, is that all we need to do to get the italic version to load properly when we style the text with font-style: italic; or do we need to actually select that particular font to get the proper look?

Either way, the Gantry documentation for this should be updated. @RyanMPierson

[simmonsr]

In your case, I would just add this to your custom.scss file:

@include font-face("lato", 'gantry-theme://fonts/lato/lato-blackitalic/lato-blackitalic-webfont', 900, italic);
@include font-face("lato", 'gantry-theme://fonts/lato/lato-bold/lato-bolditalic-webfont', 700, italic);
@include font-face("lato", 'gantry-theme://fonts/lato/lato-italic/lato-italic-webfont', 400, italic);
@include font-face("lato", 'gantry-theme://fonts/lato/lato-lightitalic/lato-lightitalic-webfont', 200, italic);

Then the text that uses the "lato" font with font-style: italic will utilize one of these fonts depending on the font weight.

[newkind]

I'd say let's reopen this for now but I want to digg into this deeper, for a proper solution

[N8Solutions]

@simmonsr & @newkind Thank you both for your time on this.

[N8Solutions]

Updating my templates and came across this issue again. Has there been any progress on this?

kind regards,

Michael