Webpage using Rendered Local Font instead of @import

I run several work webpages that are all around other countries and I am having some issues with a Seoul, South Korean webpage and the fonts that it's applying.

What I'm trying to achieve:
I want to have the 'Nanum Gothic' (https://fonts.google.com/specimen/Nanum+Gothic) font applied on the Korean webpage but instead it's being overwritten by the Malgun Gothic local file.

Problem:
Windows: When I visit the webpage on Windows, it shows that it's rendering the Malgun Gothic font, but on the CSS its showing that Nanum Gothic is applied with font-family:
enter image description here
enter image description here

Below, I will provide all the code references that I currently have:

variables.scss

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

// Korean font family based on local team request
$korean: $whitney, 'Nanum Gothic', sans-serif;

_base.scss:

/**
 * Font family for Korean site
 */
html[lang="ko-KR"] body {
    font-family: $korean;
    @include headings {
        font-family: $korean;
    };
}

1 answer