Variable Font Viewer

Preview and tune variable font axes online

Roboto Flex3 axes

A flexible sans-serif variable font with optical size, weight, and width axes.

Variable fonts let one file behave like an entire type family.

Generated CSS

.variable-preview {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 64px;
  line-height: 1.15;
  font-weight: 400;
  font-stretch: 100%;
  font-style: normal;
  font-optical-sizing: none;
  font-synthesis: none;
  font-variation-settings: 'opsz' 14, 'wght' 400, 'wdth' 100;
}

Aspose.FontAspose.Font Web Applications

Buy

Variable fonts contain many styles in one font file. Instead of switching between separate static files, you can adjust axes such as weight, width, optical size, italic, slant, or custom design dimensions. This online Variable Font Viewer helps you explore those axes visually and quickly.

Use the built-in sample fonts or upload your own local TTF or OTF file. The application reads OpenType variation data in your browser and renders an instant preview with editable text, axis sliders, named instances, and generated CSS. Uploaded files are processed locally in this first version and are not sent to a server.

This viewer is the first step toward a broader variable-font toolchain. Later versions can connect to backend processing powered by our Python font library for deeper validation, reports, and export workflows.

  • Preview variable fonts directly in your browser.
  • Upload a local TTF or OTF variable font and inspect its variation axes.
  • Adjust weight, width, optical size, slant, and custom axes with live sliders.
  • Copy CSS font-variation-settings for your design or web project.

How to preview a variable font

  • Choose one of the sample variable fonts or upload your own TTF or OTF font file.
  • Review the detected variation axes such as weight, width, optical size, slant, or custom axes.
  • Move the sliders or choose a named instance to change the live text preview.
  • Edit the preview text and size to test the font in a realistic layout.
  • Copy the generated CSS snippet and use it in your design or web page.

  • What is a variable font?A variable font is an OpenType font that can contain many styles in a single file. Design axes such as weight, width, optical size, or slant can be adjusted continuously.
  • How do I preview a variable font?Choose a sample font or upload a local TTF or OTF file. The app will show available axes and render your preview text with the selected values.
  • Are uploaded fonts sent to the server?In this browser-only version, uploaded fonts are loaded locally for preview and OpenType table inspection. They are not sent to a backend service.
  • Which font formats are supported?The first version reads raw TTF and OTF files for axis metadata. WOFF and WOFF2 files can often be previewed by the browser, while deeper metadata analysis is planned for the backend stage.

  • Live Variable Preview

    Test variable-font axes instantly with sliders, editable preview text, and named instances.

  • Local Browser Inspection

    Upload a local font and inspect its OpenType variation axes in the browser without waiting for server processing.

  • CSS Ready

    Copy generated font-variation-settings CSS and move from exploration to implementation faster.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.