In certain situations the site or app you’re building uses fonts that are not hosted in a CDN. The font is not in Google fonts, and is not in Adobe Fonts or other provider.

You may be given at that point a set of OTF, TTF and WOFF files. But what do do then? How do you integrate those font files in your Buffalo app?. After all, you want your frontend to look as closer to what your designer has put together, And we all know that fonts matter.

What to do?

Assuming you are in your Buffalo app folder, take a look at the assets sub-folder.

- assets
  > css
  > images
  > js

Nothing there says fonts, right?.

Brief context on the buffalo assets build process

Buffalo bases its assets build in Webpack. It compiles Javascript using Webpack tools like Babel, and processes the SASS/SCSS using node-sass.

That leaves images alone, Right?

Images are copied into the public/assets/images folder. And like this, all other folders or files that are not CSS or Javascript get copied to the public/assets folder.

At build time, the public folder is filled with the results of the assets compilation and then is packed into the app binary, with Packr. But Packr is a whole complete (and long) separate topic.

Our solution

Now that we know how files in the assets folder are processed and packed into the binary, you may know what’s coming up.

We need to create another folder called fonts inside the assets one.

- assets
  > css
  - fonts // Like this!
    * myFont.woff
    * myFont.ttf
    * myFont.otf
  > images
  > js

But that’s not all. Until this we’ve only ensured that the fonts make it to our binary.

Now we need to make sure our fonts make it to our CSS. What we typically do is we create a file called: _fonts.scss. In there, you can add your font definitions, like the following:

@font-face {
  font-family: "My Custom Font";
  font-style: normal;
  font-weight: 300;
  src: local("My Custom Font"), 
       url("/assets/fonts/myFont.woff") format("woff");
}

This will ensure that the app pulls your fonts from the assets folder, and finally will make your font available to be used in your app.

Wrapping up

With this brief post I shared a bit on how asset files are handled by Buffalo. I also showed a bit of the compilation details of the buffalo binary, and how to add custom fonts into your buffalo app.

If you like this, don’t hesitate to share it. I would love to read/hear your opinions.