JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">I could have a font</div>

SCSS

@mixin getFont($name, $url){
  @font-face {
    font-family: $name;
    src: url(#{$url}.eot);
    src: url(#{$url}.eot?#iefix) format("embedded-opentype"),
    url(#{$url}.woff) format("woff"),
    url(#{$url}.ttf) format("truetype"),
    url(#{$url}.svg#) format("svg");
    font-weight: normal;
    font-style: normal;
  }
}

.test
{
    @include getFont("Helvetica", "../fonts")
}