Replace Fresh & gfm's default code font with monolisa

First time

This is my first time Buying a font! And this first time is for monolisa. Its beauty leaves me no choice but to buy it. much!

Replace the blog's code font

Download the font

First, go to the orders page, then select the Web tab. You choose what feature you want, and then click the download button. I chose the BASIC LATIN, LATIN-1 SUPPLEMENT, LIGA, CALT, ZERO. I love the ligatures!

Add the font to the project

After downloading, you'll receive a zip file, which you should unzip. Inside, you will find a woff2/ folder and a monolisa.css file. We can safely ignore the css file, as we'll configure our font family using twind.config.ts.

Now copy the woff2/ folder to the static/ folder of the Fresh project. And inside the twind.config.ts file, add the following code to the config object:

// twind.config.ts
preflight: {
  "@font-face": [
    {
      src: 'url(/woff2/0-normal.woff2) format("woff2")',
      fontFamily: "ml",
      fontWeight: "100 900",
      fontStyle: "normal",
      unicodeRange: "U+0020-007F",
    },
    {
      src: 'url(/woff2/1-italic.woff2) format("woff2")',
      fontFamily: "ml",
      fontWeight: "100 900",
      fontStyle: "italic",
      unicodeRange: "U+0020-007F",
    },
    {
      src: 'url(/woff2/2-normal.woff2) format("woff2")',
      fontFamily: "ml",
      fontWeight: "100 900",
      fontStyle: "normal",
      unicodeRange: "U+0080-00FF",
    },
    {
      src: 'url(/woff2/3-italic.woff2) format("woff2")',
      fontFamily: "ml",
      fontWeight: "100 900",
      fontStyle: "italic",
      unicodeRange: "U+0080-00FF",
    },
  ],
},

Replace the default code font

The gfm project provides a very nice GitHub Flavored Markdown font. But we want to use our own font. So we need to replace the default font with our font in our blog's route file, for example, mine is blog/[slug].tsx.

// blog/[slug].tsx
<style dangerouslySetInnerHTML={{ __html: gfm.CSS }} />
<style>
  {`
   pre, code, kbd, samp {
   font-family: ml,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
   font-size: 1em;
   }
 `}
</style>

Done

Then our blog's code font is replaced with our own font. Enjoy it!

Fresh

monolisa

gfm