I'm experimenting with using the IBM Plex otf fonts. There are several typefaces: Sans, Serif, etc. There are 16 files for one typeface (Sans is listed here). As far as I know, IBM isn't hosting their fonts publicly (so I can't do an @import or set up a link), instead making them available through a github download. Meaning, if you want to use them on your site, you have to serve them up from your site. (Right?)
Now, I can set up 80 or so @font-family references for all of them, like these two for regular and bold sans:
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
src: url(https://...IBMPlexSans-Medium.otf) format('otf');
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
src: url(https://...IBMPlexSans-Bold.otf) format('otf');
}
But I'm thinking there might be a way to avoid that. So, my question is this: will browsers use any sort of hints to find appropriate font files? For example, if I have the source reference and the family for the medium font, will they look for other file names at the same source to find the bold font, or the italic font, or whatever? Or do I have to spell out everything?
I found a solution. The bad news: yes, it does appear that you need to generate all the font-face CSS, and it amounts to over 3000 lines of code for the four different typefaces. The good news: there's an online tool at Transfonter.org that will do it for you. It will also do neat things like convert .otf files to .woff files, among a number of other conversion options. Just upload the fonts you want, hit convert, and download the result. The result includes a css file that has all of the necessary @font-family code.