Unicode subsets for Fira Sans typeface

Usage no npm install needed!

<script type="module">
  import affectionatedoorFiraSansSubsets from 'https://cdn.skypack.dev/@affectionatedoor/fira-sans-subsets';


Fira Sans subsets

Unicode subsets for the Fira Sans typeface. The subsets focus only on Latin + Greek at the moment.


yarn add @affectionatedoor/fira-sans-subsets

Import the CSS file (you need loaders for the CSS and font files):

import "@affectionatedoor/fira-sans-subsets";

Use the font files in CSS:

html {
  font-family: "Fira Sans", sans-serif;


  • Latin: U+0000-00FF.
  • Phonetic alphabet: U+0250-02FF.
  • Combining diacritical marks: U+0300-036F.
  • Greek: U+0370-03FF.
  • Greek extended: U+1F00-1FFF.
  • Rest: U+2000-1F916.

Note: In IE9-11, unicode-range subsets don't work as expected, because the browser downloads all the available font files.


Subsets are available for Regular, Italic, Bold, and BoldItalic. I may add more in the future.

Usage with Gatsby

// gatsby-browser.js
import @affectionatedoor/fira-sans-subsets

Important: Many of the subset files are small, and, as a result, Gatsby will try to inline them as base64 strings in the CSS. This will result into a huge CSS file. To go around that, you'll have to change the inline limit for Webpack:

// gatsby-node.js
exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig();
  const fontRule = config.module.rules.find(rule =>
  // Set a very small limit of 3KB.
  fontRule.use[0].options.limit = 3000;

See the link for more details.