Webflow and OpenType


In this font there are both old-style figures and lining figures. Some letters are also changeable like the small A. My question is if it’s possible to change which one to use inside webflow? If not how do I change the font to use desired glyph as standard before uploading it?


Please upload the font file here…

If you want to do this in Webflow you have to use custom code for now.
See: https://prowebtype.com/styling-opentype-fonts/

I have made this a wishlist item, go and upvote it here :smile:

@samliew That I can’t do for licensing issues.

Sadly I’m not getting it to work with .otf but .ttf works perfectly. Thanks @perkristian

So for anyone wanting to do this in the future it’s:

<style> .YourClass {
	font-variant-numeric: lining-nums;     /* high-level property          */
	-moz-font-feature-settings: 'lnum';    /* low-level (old Firefox)      */
	-webkit-font-feature-settings: 'lnum'; /* low-level (old Webkit)       */
	font-feature-settings: 'lnum' on;      /* low-level (all new browsers) */(

An easy way to do this without using custom code is by using the Fontsquirrel webfont generator: https://www.fontsquirrel.com/tools/webfont-generator

When you select ‘expert’, this tool allows you to ‘flatten’ certain features, so that they become the default.

Where do you place this code? Could you provide a screen shot of it in the correct environment for reference?

Hey, I did this – but the files I get are .css.
How do I upload this to webflow? I was expecting a font format like .otf or .ttf