Font variables (Light, Medium, etc.) are reverting to a different font in Frameless output RH2022

[glundeen]

I followed Peter Grainge's instructions for displaying fonts on devices that don't have the installed fonts by adding the @Blissful_help0D4E-face text to the CSS file. The URL file, Inter-VariableFont_slnt,wght.ttf, contains several variations of the font (e.g., Light, Medium, SemiBold, etc.) which I use for drop-down text and subheadings. The majority of my styles use the primary font which is Inter. The text I added to the CSS file initially was:

@Blissful_help0D4E-face {
font-family: "Inter";
src: url("Inter-VariableFont_slnt,wght.ttf");
}

However, when I viewed the output on a different computer, it converted the Inter Light, Inter Medium, etc. text to Inter. Since variables of the primary font (e.g., "font-family: 'Inter Light';", "font-family: 'Inter Medium';", etc.) are in the CSS, I added similar @Blissful_help0D4E-face text for the other three. For example:
@Blissful_help0D4E-face {
font-family: "Inter Light";
src: url("Inter-VariableFont_slnt,wght.ttf");
}

However, when I viewed the output on a different computer, it converted the Inter Light, Inter Medium, etc. text to something else like Times Roman.

How do I get the variations of Inter to show correctly?

[Jeff_Coatsworth]

Did you verify that the font can be redistributed? Some of them can't.

[glundeen]

Yes, and they can.

[Peter Grainge]

1. Post a link to where you downloaded the font. 
2. Set it up in the project that you can download from my site and test it there. 

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[glundeen]

https://fonts.google.com/specimen/Inter?query=inter

I set it up in the FontAwesomeProject and it worked when I had text for all font variables in the CSS. However, it bolded text more than desired so I had to remove bold and select a font weight instead. If I only had text for the primary font in the CSS, it didn't adjust the bold for all the other font variables, but it displayed a substitute font on a device that didn't have the fonts installed.

[Amebr · Accepted solution]

Have you added the font file into your project? If you don't do this, then other computers without the font installed will get one of the fallback fonts, if specified, or the browser default font which is often Times New Roman. I suggest saving the font file in the same folder as your css file so you don't have to worry about relative paths. 

I did a simple test without installing the fonts on my computer and it seemed to work correctly to display the correct font in the output.

I'm not that familiar with variable fonts. however, if you want to specify different names for each variation you need to specify the font weight in the font-face definition. Alternatively, you would need to specify the font weight in the respective styles, if you just want to use one font name

Example: multiple font names

@Blissful_help0D4E-face {
    font-family: "Inter"; // Inter Regular
    src: url("Inter-VariableFont_slnt,wght.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "Inter Light";
    src: url("Inter-VariableFont_slnt,wght.ttf");
    font-weight: 300;
}
@font-face {
font-family: "Inter Medium";
    src: url("Inter-VariableFont_slnt,wght.ttf");
    font-weight: 500;

Example: One font name

@Blissful_help0D4E-face {
    font-family: "Inter";
    src: url("Inter-VariableFont_slnt,wght.ttf");
    font-weight: 300 600; //list the lightest and darkest font-weights in the variable font
}

h1 {
    font-family: Inter;
    font-weight: 600 //Inter SemiBold
}
p {
    font-family: Inter;
    font-weight: 400; //Inter Regular
}

I think there's more complexity in how variable fonts should be done, but this at least seems to work on a quick test.

Let us know how that goes.

[glundeen]

Yes. I got it working yesterday so all good. Thanks.