Variable Font Feature Axis Tester

Adjust dynamic properties across supported modern fonts. Tune weight, width, slant, optical size, and OpenType features live, then copy the generated CSS.

Font Selection
Variation Axes
wght Weight
400
wdth Width %
100
slnt Slant deg
0
ital Italic
0
opsz Optical Size
14
OpenType Features
Standard Ligaturesliga
Discretionary Lig.dlig
Tabular Figurestnum
Slashed Zerozero
36px
Click text to edit
Variable fonts adapt: weight, width, and optical size all flow without separate font files. AaBbCc 0123456789
Weight
400
Width
100%
Slant
0deg
Opt. Size
14pt
Generated CSS

        
        

          Paste into any CSS rule. Axes not supported by the chosen font are silently ignored by the browser.
        

      

      

    

    
  

  

  
  

  
  

    
Key Typography Terms Explained

    

      

        
Variable Font

        
A single OpenType font file that encodes a continuous design space of typographic variations using interpolation, replacing multiple static font files.

      

      

        
OpenType Axis

        
A named dimension of typographic variation within a variable font, such as weight or width. Each axis has a four-letter tag, a minimum, a maximum, and a default value.

      

      

        
Design Space

        
The full range of typographic variants accessible within a single variable font, defined by all its supported axes and their allowable ranges combined.

      

      

        
font-variation-settings

        
A CSS property that sets one or more OpenType axis values directly using their four-letter tags and numeric values, for example: font-variation-settings: 'wght' 600, 'wdth' 85.

      

      

        
font-feature-settings

        
A CSS property that enables or disables OpenType typographic features such as ligatures, tabular numbers, and slashed zeros using their four-letter tags.

      

      

        
Optical Sizing (opsz)

        
A registered axis that adjusts stroke contrast, spacing, and letterform weight to remain visually consistent across very small and very large display sizes.

      

      

        
Registered Axis

        
An OpenType axis with a standardized lowercase four-letter tag (wght, wdth, slnt, ital, opsz) defined by the OpenType specification with agreed-upon value ranges.

      

      

        
Custom Axis

        
A non-standard axis defined by the font designer using an uppercase four-letter tag. Custom axes have no dedicated CSS property and must always be set via font-variation-settings.

      

      

        
Tabular Figures (tnum)

        
An OpenType feature that assigns equal horizontal width to all digits, ensuring columns of numbers align vertically in tables and financial displays.

      

      

        
Ligature

        
A single glyph that replaces two or more adjacent characters whose forms would otherwise collide or look awkward, such as fi, fl, or ff in Latin text.

      

    

  


  
  

    
The Complete Guide to CSS Variable Fonts and OpenType Feature Control

    
Variable fonts are one of the most practical advances in web typography since web fonts themselves. A single file replaces an entire family of static weights, widths, and styles, and CSS gives you direct access to every axis. This guide covers how variable fonts work, how to use this tester effectively, and how to write production-ready CSS for any modern browser.


    
How to Use This Tester

    
Select a font preset from Column 1 or paste a direct URL to any .woff2 or .ttf variable font file and click Load. The font loads via the browser's FontFace API entirely on your device - no file is uploaded to any server. Then drag any axis slider and watch the canvas in Column 2 update instantly. Column 3 always shows the exact CSS you need to replicate the current state. Click Copy CSS and paste it directly into your stylesheet.

    
The preview canvas is fully editable. Click anywhere in the text and type your own words or numbers to test ligatures, tabular figure alignment, and how the font handles your actual content at your chosen axis settings.


    
Understanding the Five Registered Axes

    
The wght (weight) axis is the most widely supported, ranging from 100 (thin) to 1000 (ultra-black). Most variable fonts include at least this axis. The wdth (width) axis scales letterforms horizontally as a percentage of their default width, from condensed around 50 to expanded around 150. The slnt (slant) axis leans glyphs without switching to a separately drawn italic, using negative degree values. The ital (italic) axis switches between the upright design (0) and the full italic design (1), and some fonts support fractional values for gradual transitions. The opsz (optical size) axis adjusts contrast and spacing to remain readable from small caption sizes to large display headlines.

    
Not every font supports all five axes. When an axis in your font-variation-settings declaration is not supported by the loaded font, the browser silently ignores that axis and applies the others without error.


    
OpenType Feature Settings in Practice

    
Standard ligatures (liga) are enabled by default in most browsers. Turning them off can be useful in code or tabular contexts where fi or fl ligatures might confuse character recognition. Discretionary ligatures (dlig) include decorative combinations the designer considered optional, such as st or ct ligatures, and are off by default. Tabular figures (tnum) assign each digit the same advance width, essential for aligning columns of numbers in financial tables. The slashed zero (zero) replaces the digit 0 with a visually distinguished slashed form to prevent confusion with the uppercase letter O, useful in code and serial numbers.


    
Performance and Loading Strategy

    
Preload your variable font with a link tag using rel="preload" and as="font" and type="font/woff2" to ensure it loads as early as possible. Add crossorigin="anonymous" even for same-origin fonts, because the browser's font loader always uses CORS. Use the unicode-range descriptor in your @font-face block to limit the font to the character sets you actually use - this allows browsers to download only the subsets needed for the current page. For Google Fonts variable fonts, the API URL syntax uses ranges like [email protected] to request the full axis range.


    
CSS Animation and Transitions with Variable Fonts

    
Variable font axes can be smoothly animated with CSS transitions or keyframes. For high-level properties like font-weight, transitions work exactly as expected. For font-variation-settings, the browser interpolates between two values only if both declarations contain identical axis lists in the same order. If the axis lists differ, the browser snaps rather than interpolates. A practical pattern is to set all axes in a single font-variation-settings declaration and transition that property, ensuring consistent interpolation across all axes simultaneously.


    
Frequently Asked Questions


    

      

        What is a variable font and how does it differ from traditional static fonts?
        +
      

      

        A variable font is a single OpenType font file that encodes an entire design space of typographic variations using interpolation math. Traditional static fonts are separate files for each style: one file for regular, one for bold, one for italic, and so on. A variable font replaces all of those with a single file that the browser can smoothly animate or set to any supported position along each registered axis. For example, a single variable font file can represent any weight from 100 (thin) to 900 (black) rather than requiring nine separate weight files. This dramatically reduces HTTP requests and often reduces total file size when you need more than two or three styles.
      

    


    

      

        What is the difference between standard (registered) axes and custom axes?
        +
      

      

        The OpenType specification defines a set of registered axes that have standardized four-letter tags and agreed-upon value ranges. The five most common registered axes are: wght (weight, 1 to 1000), wdth (width, expressed as a percentage of normal), slnt (slant, in degrees), ital (italic, 0 for upright or 1 for italic), and opsz (optical size, in points). Because these axes are standardized, browsers also expose CSS properties that map to them: font-weight maps to wght, font-style maps to slnt and ital, and font-optical-sizing maps to opsz. Custom axes use uppercase four-letter tags by convention (for example GRAD for grade or YOPQ for y-opaque) and have no standardized CSS property mapping, so they must always be set via font-variation-settings.
      

    


    

      

        How do I correctly apply variable font styles using standard modern CSS?
        +
      

      

        To use a variable font in CSS, first declare it with @font-face using a format hint of woff2-variations or truetype-variations to tell the browser it is a variable font. Then apply it with font-family as normal. For registered axes, you can use the high-level CSS properties: font-weight: 350 sets the wght axis, font-style: oblique -10deg sets the slnt axis, and font-optical-sizing: auto lets the browser set opsz automatically based on font size. For any axis not covered by a high-level property, or when you want explicit control over registered axes, use font-variation-settings: 'wght' 350, 'wdth' 90 and so on. Be aware that font-variation-settings does not inherit smoothly during CSS transitions unless both states use the same axis list.
      

    


    

      

        Why should I use font-variation-settings versus dedicated properties like font-weight?
        +
      

      

        The high-level CSS properties (font-weight, font-style, font-stretch) are preferred for registered axes because they inherit correctly, work with @media and @supports queries, and are well-understood by assistive technologies. However, font-variation-settings gives you two advantages: it is the only way to access custom axes (like GRAD or YOPQ) that have no dedicated CSS property, and it lets you set multiple axes in a single declaration for brevity. The main trade-off is that font-variation-settings does not participate in CSS value interpolation the same way font-weight does, so transitions between two font-variation-settings declarations require matching axis lists. Best practice is to use high-level properties for registered axes and reserve font-variation-settings for custom axes or when consolidating many axis values at once.
      

    


    

      

        Does loading a single variable web font save bandwidth compared to multiple traditional font weights?
        +
      

      

        It depends on how many styles your design actually uses. A single variable font file is larger than one static weight file because it must encode all the interpolation data for every supported axis. However, it is almost always smaller than two or more static files combined. If your design uses only one weight (say, regular 400), a static file is slightly smaller. If your design uses three or more styles, a variable font almost always wins. For example, three static Roboto files (regular, bold, italic) might total 120 KB, while a single Roboto Flex variable file is around 160 KB but covers the entire design space of weight, width, and slant with a single HTTP request. The real gain is also in HTTP request count: one request versus three or more, which meaningfully improves page speed on slow connections.