How to apply font like a boss

@font-face {
    font-family: "Noto Sans CJK KR";
    font-style: normal;
    font-weight: 900;
    src: url("./fonts/NotoSans-Black.eot?") format("eot"),
        url("./fonts/NotoSans-Black.woff2") format("woff2"),
        url("./fonts/NotoSans-Black.woff") format("woff");
    }

/* _mixins.scss */
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
	$src: null;
	$extmods: (
		eot: "?",
		svg: "#" + str-replace($name, " ", "_")
	);
	$formats: (
		otf: "opentype",
		ttf: "truetype"
	);
	@each $ext in $exts {
		$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
		$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
		$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
	}
	@font-face {
		font-family: quote($name);
		font-style: $style;
		font-weight: $weight;
		src: $src;
	}
}

/* App.scss */
@import "../stylesheets/_mixins.scss";

@include font-face("Noto Sans CJK KR", "./fonts/NotoSans-Black", 900, normal, eot woff2 woff);

.App {
    font-family: "Noto Sans CJK KR";
    -webkit-font-smoothing: antialiased;
}

.
├── App.css
├── App.js
├── App.scss
├── index.css
├── index.js
├── components
│   ├── About
│   │   ├── About.css
│   │   ├── About.js
│   │   ├── About.scss
│   ├── Event
│   ├── Header
│   └── index.js
├── fonts
│   ├── NotoSans-Black.eot
│   ├── NotoSans-Black.otf
│   ├── NotoSans-Black.woff2
│   └── NotoSans-Black.woff
└── stylesheets
    ├── _mixins.scss
    └── _variables.scss

├── fonts
│   ├── font.css
│   ├── font.scss
│   ├── NotoSans-Black.eot
│   ├── NotoSans-Black.otf
│   ├── NotoSans-Black.woff2
│   └── NotoSans-Black.woff
└── stylesheets
    ├── _mixins.scss
    └── _variables.scss

/* font.scss */
@import "../stylesheets/_mixins.scss";

@include font-face("Noto Sans CJK KR", "./NotoSans-Black", 900, normal, eot woff2 woff);

/* index.css */
@import url('./fonts/font.css');