Host Web Font yourself … some info

Sorry didn’t see your topic. Your post is just a day before mine there. I have overlooked. PS: Try the Transfonter.

so my resulting recommendation is:

• upload the normal font via Custom Font Manager –
• upload the corresponding variable font manually via ftp and
• use a manually set @import rule.

on Quick css set the css in the above manner – with the @supports option.
f.e. on that heavy weight champion : roboto flex:

@font-face {
  src: url('/wp-content/uploads/avia_fonts/type_fonts/RobotoFlex-variable.woff2') format('woff2-variations');
  font-family:'Roboto Flex';
  font-style: normal;
}

yes it is a bit more complex – but you will be rewarded with more styling options.

i do always transform the downloaded ttf variable fonts to woff2 fonts – because these files do have the best compression level of all font mime types.
All browsers that support variable font files do support woff2.
if you open the mentioned page : https://wakamaifondue.com/ and drag your ttf ( or in my case the woff2 to that circle with the rotating letters. you can see on variable section for open sans font:

here you can see the layout options on that variable font – so my more detailled @import rule will be:
( btw i do place the fonts in the same directory as the enfold custom font manager fonts and that css rule to style.css of my child theme )
on my style.css i have:

@font-face {
  src: url('/wp-content/uploads/avia_fonts/type_fonts/opensans-variable.woff2') format('woff2');
	font-family:'Open Sans Variable';
	font-weight: 300 800;
	font-stretch: 75 100;
	font-style: normal;
}

on my quick css
f.e.:

#top #wrap_all .av-special-heading-tag {
    font-family:'open-sans',Helvetica,Arial,sans-serif
    font-weight: 400;
}

@supports (font-variation-settings: normal) {
    #top #wrap_all .av-special-heading-tag {
      font-family: 'Open Sans Variable', sans-serif;
      font-stretch: 100%;
      font-weight: 350;
    }
}

this is because : if the browser supports variable fonts – that font will be taken – if not the normal open-sans (uploaded via custom font manager) is in place as fallback.

Very nice tool on firefox ( i got the developer edition installed – but maybe the normal one has it too ) on developer tools is the fontstyle tab:
enlarge the image on click

you see that the font is working under its variable layout options.
you can adjust the existing sliders until you like the layout – and then note these settings and transfer them to css.

i do not see that options on your page –

so that was my assumption, that a variable font loses its properties via the Custom Font Manager.

Now do you realy need those layout options – or maybe it is enough to have a normal and a bold variant?
see file-size comparison:

you can compare those file-sizes now – think of performance of your page – perhaps it is enough to have two fixed font-weights only for selection.
and on gtmetrix the font-loading times:

if someone is interested in how to transform variable ttf fonts to woff2 – please do ask for it here.

you can see the difference on the videos:

https://vimeo.com/748724583

on a variable font it is possible to set a font-weight of 535 or 421 etc. pp.
i do not see on your settings – that this is possible.

so this is my recommendation:

• upload the normal font via Custom Font Manager –
• upload the corresponding variable font manually via ftp and
• use a manually set @import rule.

if you can live with regular and bold fontweight – you do not need to change something – but i would upload only the normal fonts ( but i think it is on open-sans 400 and 700 ) because you see in the gtmetrix comparison that both font styles can be loaded at the same time, so 260ms instead of 644ms. Your website will load faster as a result.

why the 400 and 600 font-weights to work on your setting – i don’t know. But as said before:
a variable font loses its properties via the Custom Font Manager upload.

thanks Yigit: I know that manual setting is successful. As described above.
The workflow is to manually upload the variable font – and upload the fallback fonts via the Custom Font Manager.
Then using @supports (font-variation-settings: normal) { to set the switch.
But it would be easier on inserting the variable font to font options will preserve all Variable Properties.

PS: as said above – The fontuploader preserves all properties – ( because after uploading – i download the font via ftp from /wp-content/uploads/avia_fonts folder and test it on https://wakamaifondue.com/beta/

Yigit – please read my edited anwer on top again. It seems not to be the uploader.