I am using the Google Font 'Vollkorn' which has recently been updated to be a variable font. I am only using the italic variation of this font.
On Chrome, this works fine and displays italic. But on Safari it requires the font-style: italic style to be applied to everywhere it is used.
I am using an incredibly large and locked-down CMS, so adding this option to everywhere it's used is a colossal task.
Is there a way to force italic without needing font-style: italic in Safari. Perhaps a setting or perimeter on the import URL. I have looked thoroughly though Google API CSS2 variable fonts doc but couldn't find such an option: https://developers.google.com/fonts/docs/css2
Font: https://fonts.google.com/specimen/Vollkorn
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital@1&display=swap');
body {
font-family: 'Vollkorn', sans-serif;
font-size: 50px;
//font-style: italic;
}
Seems like it could be a Safari bug:
If you copy the url for the import, https://fonts.googleapis.com/css2?family=Vollkorn:ital@1&display=swap, and go to that in another browser window, you can see the CSS that Google Fonts is serving up:
/* cyrillic-ext */
@font-face {
font-family: 'Vollkorn';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmTObTa3w.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Vollkorn';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmaObTa3w.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Vollkorn';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmdObTa3w.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Vollkorn';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmRObTa3w.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Vollkorn';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmQObTa3w.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Vollkorn';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmeObQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Each @font-face rule includes font-style: italic;. The @font-face rules describe available font faces that can be used. (Because of the unicode-range descriptors, these rules are treated like a composite describing one available font face.) The user agent will apply the font matching algorithm comparing the styling of the content against the available faces.
In your content and CSS, you want to specify font-family: Vollkorn; without specifying font-style: italic; explicitly. If you don't specify font-style explicitly, then the initial value, font-style: normal; is assumed. So, the browser will be comparing content styled font-family: 'Vollkorn'; font-style: normal; against available faces that include font-family: 'Vollkorn'; font-style: italic;.
Now, according to 5.2 Matching font styles in CSS Fonts Module Level 4, an early step in the matching algorithm will compare font-family:
- For other family names, the user agent attempts to find the family name among fonts defined via @font-face rules...
That should match against the Vollkorn composite defined in Google Font's @font-face rule.
Later in the algorithm, font-stretch values will be compared, but shouldn't block the preceding font-family match.
If the value of font-style is normal,
- Oblique values greater than or equal to 0 are checked in ascending order.
- If no match is found, italic values greater than or equal to 0 are checked in ascending order.
The numeric italic values refer to the fact that a variable font with an italic axis can potentially have instances on a continuous range from 0 to 1. The fonts served up by Google Fonts are actually static instance fonts that they derive from the variable font. So, the descriptor font-style: italic is implicitly treated as 1.
- ... If a font does not have any concept of varying strengths of italics ... its style is mapped according to the description in the font-style property definition.
And
For TrueType / OpenType fonts that use variations... the ital variation with a value of 1 is used to implement the italic values.
I don't work with the CSS Fonts spec day in/day out, but I think my reading is right. And it seems to me that Chrome has it right but that the behaviour you describe for Safari is a bug. (Which is surprising to me, given that the CSS Fonts Module editor is from the Safari team.)
I suggest you report it to the Google Fonts folk: This would probably affect a number of their fonts, and their engineers interact with Chrome, Safari and other browser engineers via the CSS working group. One way to send the GF team feedback is to open an issue in their GitHub project.