Inter fonts lacks italics

[cssobral2013]

No description provided.

[virgofx]

Version 3.12 includes the italic variable font. @m4rc1e Anyway to get this included?

[adamgreenough]

Absolutely love this font, really struggling without italics. Let's please get this in if possible! 😄

As an aside, does anybody know a way to let the browser apply faux italics to it for the time being? Firefox & Safari do it fine but Chromium doesn't. Presumably because they don't support font-synthesis yet.

[bartek-szymanski]

Is there any time schedule when will Inter font be updated to include italic?

[davelab6]

#2576 explains a bit more why this is the case.

https://github.com/rsms/inter/blob/5ea76aef5a6790085ef2427a726d9953772a26ef/Makefile#L55-L56 suggests there is now a separate italic file that we can use.

[virgofx]

To clarify ... I don't have an issue with a separate font file for Italic (or one). Just curious when it'll be available on Google CDN?

[mahnunchik]

@rsms Do you know why italic is missing from Google Fonts?

[brycewray]

Unless/until Google Fonts makes an italic version available, one can do the following:

1. Download the full variable-font version of Inter (https://github.com/rsms/inter/releases/ should always have the latest).
2. Subset it so it's not enormously large (see https://michaeljherold.com/2015/05/04/creating-a-subset-font/ for an explanation of using the Python fonttools library for this purpose).

I am currently doing this on my own Tailwind CSS-equipped site with a single Inter v.3.15 variable-font file (that ends up at a little under 51K after subsetting), using the following CSS:

/* === entire 'fonts.css' file === */
/* === Inter, variable === */
/* === (see https://thetrevorharmon.com/blog/how-to-prepare-and-use-variable-fonts-on-the-web) === */
/* latin */
@font-face {
  font-family: 'Inter';
  font-weight: 1 999;
  font-style: oblique 0deg 7deg;
  font-display: swap;
  src: url('../fonts/Inter-3-15_subset_2020-08-20.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-weight: 1 999;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Inter-3-15_subset_2020-08-20.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;
}

/* === within 'index.css' (which imports 'fonts.css' and some other .css files) === */

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .italic {  /* overriding this Tailwind CSS class in Safari 11+ only */
        @apply not-italic !important;
    }
  }
}


i, cite, em, var, address, dfn, .italic, h3, .h3 {  /* overriding the Tailwind CSS .italic class */
  font-variation-settings: 'slnt' -7;
  font-style: oblique 7deg;
}

/* === The 7-degree thing is up to you. Some suggest 10 degrees, but that looks **too** slanted to me. === */

This works for my site, anyway. As you see, I had to do some adjusting to keep Safari in particular from over-slanting, but this otherwise seems to do well.

Update: The site is no longer using Tailwind, so don’t want to confuse or mislead anybody about that; it was, however, using it at the time I originally wrote this reply.

[yetisyny]

#2576 explains a bit more why this is the case.

https://github.com/rsms/inter/blob/5ea76aef5a6790085ef2427a726d9953772a26ef/Makefile#L55-L56 suggests there is now a separate italic file that we can use.

So, could you use that italics file then, to make the italics variant available in Google Fonts? It already exists, after all. You could just make it available the same way italics is available in other Google Fonts.

Many other variable fonts already have italics variants available on Google Fonts, i.e. Raleway, Roboto Mono, Rubik, Bitter, Exo 2, Merriweather Sans, EB Garamond, Vollkorn, and Literata. I don’t see what is blocking Google Fonts from just using the existing italics file for the Inter font, seems like an easy fix.

I looked at the Inter fonts GitHub and it says that if there are any Google Fonts issues with it to report them here instead of at that GitHub.

So, if there is some kind of issue with how Inter codes for italics, as you suggest in #2576, perhaps just go ahead and change it to do it in a way compatible with current web browsers and the <i> tag or CSS “font-style: italic;” that is typically used for italics, and then hopefully it is possible to just directly upload the fixed version to Google Fonts, or (alternatively) submit it as a pull request to the Inter font with the fixes and then upload the fixed version to Google Fonts.

And if the issue is not on Google’s end but on Inter’s end... well, the Inter GitHub said that this is where to report issues with it that occur in Google Fonts, but, please feel free to tell them anything that needs changing over at https://github.com/rsms/inter/, if there is actually an issue on their end rather than on Google’s end.

I am looking to use the Inter font, including italics, on a MediaWiki wiki where Google Fonts do work but where @brycewray’s creative workaround is not technically possible (specifically, there is no way to upload font files to the web server since only certain file types can be hosted; the fonts have to be remotely hosted by Google Fonts for it to work due to technical limitations). Thanks.

[brycewray]

I should note also that I have since found additional issues with the CSS I put above in terms of getting different browsers to “behave” so, as of now, here are the relevant sections of my site’s SCSS:

/* === entire `_fonts.scss`=== */
/* === Inter, variable === */
/* === 
references:
https://thetrevorharmon.com/blog/how-to-prepare-and-use-variable-fonts-on-the-web
https://rwt.io/typography-tips/getting-bent-current-state-italics-variable-font-support
=== */
/* latin */
@font-face {
  font-family: 'Inter';
  font-weight: 1 999;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Inter-3-15_subset_2020-08-20.woff2') format('woff2-variations');
  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;
}

/* === part of `_base.scss` === */

i, cite, em, var, address, dfn, h3, h5, h6 {  /* dealing with Inter VF */
  font-variation-settings: 'slnt' -7;
  /* previous is needed by Chromium and Safari; its presence makes Firefox "over-slant" Inter VF, 
     so we override that below with the @-moz-document url-prefix media query for Firefox */
  font-style: oblique 7deg;
  /* previous is needed by Firefox and Safari to prevent "over-slanting"; 
     it apparently has no effect on Chromium */
  @-moz-document url-prefix() {
    font-variation-settings: normal;
  }
}

[natedunn]

Would love to see italic support added. 👍

[cssobral2013]

@m4rc1e - Could you reopen this issue? As of today, the API is not still displaying the italics.

[davelab6]

Sadly while the PR was merged, this hasn't been pushed through to the API, and needs further (internal) discussion.

[davelab6]

The issue I have is that -->API<-- is serving the slnt axis, but this isn't shown on fonts.google.com because - per https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests - there is a sad state of the world in regard to ital and slnt axis support in browsers, and in CSS itself.

#4211 removes the slnt axis, but per policy and practically it isn't feasible to remove an axis once it reaches the production API and web pages start depending on the API response. Therefore sadly I am creating #4334 to revert that PR.

If we don't remove the snlt axis, but add a second Italic file to the Roman (the other major thing in that PR #4211) then the API will expose that as an "ital axis" that is only offered 0,1 rather than 0..1, in addition to the slnt axis; and it would be possible to call both from the API at the same time. What to do with fonts that provide both axes isn't defined in CSS atm, so it seems undesirable to add it; indeed for Recursive the early betas did this and were changed so that only slnt remains, and that is the only other family that reached the production API with a slnt axis in 2019 before this minefield was recognized.

So, I think really the best thing to do will be to keep updating the Inter VF file as it was onboarded, with the slnt axis, and the GF team could make that axis visible on the fonts.google.com specimen page. The impact is that in Safari this won't be handled very nicely, but eventually Safari will fix that.

[davelab6]

keep updating the Inter VF file as it was onboarded, with the slnt axis

@RosaWagner please organize this into the queue with a fairly high priority as its such a popular fam

[maciej-gurban]

Does "won't happen" resolution mean Inter font won't offer italic versions in the future? It's a really popular and great font. Would be a shame to deprive it of such basic and in many cases crucial feature. The in-browser slanting is far from good looking :/

Edit: Reading a bit more in the docs, I found that that there's a slant property which allows adding what's equivalent to italics. I'm not a very frequent user of google's web fonts, but have used it on quite a few occasions. If not for this issue and taking the time to really re-explore the UI, my conclusion would have been as above - that this font doesn't offer italics at all, and it would be all up to browser's default slanting.

Perhaps, the discoverability of this fact could be improved a little in the UI? It's easy to make the wrong conclusion by looking for what seems like the way for google fonts to show that a font does ship with italics - and not finding it there.

[mbyrne00]

Hey @RosaWagner - you set this to "won't happen". Can you please give an explanation so we know?

1. Is there another font definition in google that we can use for italics?
2. Is there a workaround, or any reason?
3. Or will there simply never be italics supported?

Just need some context to your update to the issue on March 9 for those of us who come to see the issue.

Thanks

[RosaWagner]

Inter has a slant axis, so "italic" styles are available within the variable font. In CSS you can choose the slope angle with the parameter font-variation-settings: 'slnt' -10 for example. You can find more information about browser support of slant axis here: https://arrowtype.github.io/vf-slnt-test/

Google Font API can't yet generate static italic instances from a slant axis, that's a pity, but that's how it is.

We onboarded Inter Tight with a separated italic style, therefore with 2 variable fonts Roman/Italic, you can eventually use that one if you don't mind the tighter spacing.

[mbyrne00]

Thanks for the detailed explanation - much appreciated.

[brycewray]

@RosaWagner @mbyrne00 There is currently a beta for Inter which will have separate ”Roman“ and ”italic“ (obliqued) versions, so perhaps its future release to GA will resolve this issue.

[rsms]

👋 Inter author here.
As mentioned, the upcoming version of Inter no longer has a slnt (or ital) axis. It is designed and distributed as two separate variable font files ("Italic" and "Roman"/"upright")

[RosaWagner]

thanks @rsms for highlighting that a Roman/Italic version will be available in your repository :)

Concerning GF, unfortunately, once we onboarded a font with a Slant axis, we can't replace that font with a Roman/Italic family because it would otherwise cause reflow to existing users. More info on that page: https://googlefonts.github.io/gf-guide/onboarding.html#font-upgrades

[mon-jai]

@RosaWagner Does it mean that we won't get any Inter update on Google Fonts?

Will it be updated with another name like "Inter v4"?

[rsms]

@RosaWagner once we onboarded a font with a Slant axis, we can't replace that font with a Roman/Italic family

Good to know. Then let’s hold off on doing anything with the current version 3, not adding the slnt axis, so that we can add version 4 in the same way as Inter Tight (with separate Roman/Italic fonts.)

[RosaWagner]

We could eventually do that like we did with Source Sans Pro. @chrissimpkins @davelab6 what do you think?

[davelab6]

@rsms said,

so that we can add version 4 in the same way as Inter Tight (with separate Roman/Italic fonts.)

We also don't do versioning.

@RosaWagner said,

We could eventually do that like we did with Source Sans Pro. @chrissimpkins @davelab6 what do you think?

Oh, I see on https://fonts.google.com/?query=source that we still need to de-list Source Sans Pro and Source Serif Pro. This is why we don't do versioning ;)

@rsms would you be fine if we fork Inter to a GF maintained version that recreates a slnt axis?

[rsms]

@davelab6: would you be fine if we fork Inter to a GF maintained version that recreates a slnt axis?

Yes, no problem

[davelab6]

@rsms thank you!!

Are you maintaining the Inter roman and italic as outline compatible designs?

[rsms]

Are you maintaining the Inter roman and italic as outline compatible designs?

No, not anymore. (For example, the italic /a is single-storey while the Roman one is double-storey.)

The new Inter VFs does have an ital axis in the STAT table, but it’s not interpolateable so the actual fonts are split in two.

[cssobral2013]

@davelab6 - I support the idea of uploading Inter 4 to Google Fonts with another name, then delisting current Inter. See, for example, #2616 & #3104

[mbyrne00]

@davelab6 - thanks for all of your input on this. Do you think there will be much chance of an inter4 version being published soon? Or a GF maintained fork of this one with slint axis? Just something to get us all going with this font? This would also unblock fontsource publishing a workable version of inter.

[cssobral2013]

@davelab6 - If you still want to reinstate the slnt axis, I propose using an rvrn feature that changes a/e/f to cursive in Italic.

[millerrafi]

In case this helps someone looking for a quick solution, I was able to get the latest with italics by importing from the creator's site.

@import url('https://rsms.me/inter/inter.css');

EDIT - The author's suggestion:

<!-- HTML in your document's head -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

/* CSS */
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}

[AleksandrHovhannisyan]

@millerrafi You could borrow just the italic CSS, which configures the variable font's slnt axis. This comment above clarifies how you can configure this yourself.

I wouldn't recommend hotlinking to other sites' resources for a couple reasons:

1. The path to the asset may change in the future, and you wouldn't know until your site breaks.
2. CSS @import rules issue network requests, slowing down CSS parsing and your page load.
3. If your site gets enough traffic, it could spam the other site's server with requests since it would now have to serve requests originating both from your site and theirs.

[millerrafi]

@AleksandrHovhannisyan All valid points. I updated my post with a <link> example.

That CSS file is the author's offered solution and worth the tradeoff for my case, so I thought I would share. The assets are served by Cloudflare and each WOFF2 is about 100KB.

[davelab6]

@davelab6 - If you still want to reinstate the slnt axis, I propose using an rvrn feature that changes a/e/f to cursive in Italic.

Yep, exactly - recursive.design demos how to do that nicely :)

I'll be discussing this family (and other families that are in a versioning conundrum) internally and update here when I have more information about how to move forwards.

(For folks logged into ex-twitter, there's a bit more discussion from me and @eliheuer above https://twitter.com/davelab6/status/1730698467859656907)