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

Question

I followed Peter Grainge's instructions for displaying fonts on devices that don't have the installed fonts by adding the @11220649-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:
@11220649-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 @11220649-face text for the other three. For example:@11220649-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?

Amebr · Accepted Answer

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

@11220649-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

@11220649-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.

Peter Grainge · Answer

Post a link to where you downloaded the font.
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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded