Mona Sans – Free Variable Font

Mona Sans is a strong and versatile typeface. Mona Sans works well across product, web, and print.

Best Ready to Use Web Themes & Templates

Download Now

Mona Sans Font Family

Mona Sans is a variable font. Variable fonts enable different typeface variations to be incorporated into one single file. They are supported by all major browsers, allowing for performance benefits and granular design control of the typeface’s weight, width, and slant.

DownloadFree Design Resources
Project InfoLicense

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

Detail

Mona Sans comes with three variable axes each: weight (ultra thin to extra heavy), width (condensed to expanded), and slant (regular to italics). Combining these axes allows you to access thousands of different looks and endless possibilities.

Usage Example

For the web, we recommend using Mona Sans.woff2. Define the font with a @font-face rule, set its weight and stretch ranges, and use it.

@font-face {
  font-family: 'Mona Sans';
  src:
    url('Mona-Sans.woff2') format('woff2 supports variations'),
    url('Mona-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

html {
  font-family: 'Mona Sans';
}

To reduce CLS, you can preload the font in the head of your document:

<link rel="preload" href="Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>

Project Info

License

Tags

, , ,

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

Free Design Resources

Unlock a world of creativity with uur Free Design Resources. Are you a passionate designer, a creative enthusiast, or a budding artist looking to enhance your projects without breaking the bank? Look no further! Dive into a treasure trove of free design resources that will supercharge your creativity and take your work to the next level.