Top
Screen Shot 2016-05-24 at 11.56.58 PM

Creating Font Helper Mixin in SCSS (SASS)

Sometimes we need to create our custom web-font when we can’t find the required font online (like Google Web Font). But, using CSS only will be kind of pain if we want to create more than one font (including the variants). So, using CSS pre-processor will help us a lot. Today, I’ll try to create a simple SCSS (SASS) mixin to help us work with custom web-font.

 

Generate The Web Font

Before we stick to the SCSS mixin, we need to generate the web-font first. There are so many web-font generator tools, and today I’ll use Fontsquirrel as a sample. I’ll stick to Expert config, choose TrueType, EOT Lite, SVG, and WOFF, and enable the WebOnly config to disable the desktop use.

Fontsquirrel Custom Web Font Config

 

After generating the web-font, pick the font files and put to our project dir. In this sample, I’ll use Raleway font with folder structure below:

  • assets
    • fonts
      • raleway
        • Raleway-Bold.*
        • Raleway-Regular.*
        • Raleway-Medium.*
        • Raleway-Light.*
    • styles
      • fonts.scss

 

Create The Mixin

Now, let’s create the mixin. First thing first, I’ll create a variables that held the font-weight name and font-weight value, then iterate them to generate the font definitions. Let’s take a look on the code (assets/styles/fonts.scss).

 

When we compile the sass above, we’ll get result:

 

As we can see, the mixins help us a lot. We have the font-face generator mixin, and the helper mixin to use it later. Example:

 

Thanks for coming and read the post 🙂

Nanang Mahdaen El Agung

I am a Senior Front-End Developer and Javascript Addict.

Follow me on Instagram