フォントインストール反映されない

フォントをインストールしたのに反映されない

Microsoft-YaHeiとGoudy-StoutをインストールしてWeb制作に使用しようと思ったのですが、font‐familyを使って指定しても反映されません。
Wordで確認したら入っていたのでインストールはされている（？）と思います。
インストールして使うのは初めてなので原因わかる方ご教授お願い致します。

html
1<header>
2            <div class="header">
3                <div class="header-top">
4                    <div class="header01">
5                        <p>
6                            New Build<br>
7                            Renovation<br>
8                            Reform
9                        </p>
10                    </div>
11                    <div class="header02">
12                        <p class="explain">Architecture Design Office</p>
13                        <h1>GOODSTYLE</h1>
14                        <p class="phonetic">グッドスタイル</p>
15                    </div>
16                    <div class="header03">
17                        <p>新築/不動産売買/外壁塗装/リフォーム</p>
18                    </div>
19                    <div class="header04">
20                        <p class="wadatoken">奈良の新築・不動産売買・外壁塗装・リフォーム 優良工事店 和田塗研</p>
21                        <p class="business-hours">営業　平日　午前9時~午前7時（土日祝も対応可）</p>
22                        <a href="tel:+81-120-95-7722">0120-95-7722</a>
23                    </div>
24                </div>
25            </div>
26        </header>

scss
1$font01: "Microsoft-YaHei";
2$font02: "Goudy-Stout";
3
4.header01{
5    font-family: $font01;
6}
7
8.header02{
9    .explain{
10        font-family: $font01;
11    }
12    h1{
13        font-family: $font02;
14    }
15
16}