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

Question

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

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

<header>
            <div class="header">
                <div class="header-top">
                    <div class="header01">
                        <p>
                            New Build<br>
                            Renovation<br>
                            Reform
                        </p>
                    </div>
                    <div class="header02">
                        <p class="explain">Architecture Design Office</p>
                        <h1>GOODSTYLE</h1>
                        <p class="phonetic">グッドスタイル</p>
                    </div>
                    <div class="header03">
                        <p>新築/不動産売買/外壁塗装/リフォーム</p>
                    </div>
                    <div class="header04">
                        <p class="wadatoken">奈良の新築・不動産売買・外壁塗装・リフォーム 優良工事店 和田塗研</p>
                        <p class="business-hours">営業　平日　午前9時~午前7時（土日祝も対応可）</p>
                        <a href="tel:[phone]">0120-95-7722</a>
                    </div>
                </div>
            </div>
        </header>

$font01: "Microsoft-YaHei";
$font02: "Goudy-Stout";

.header01{
    font-family: $font01;
}

.header02{
    .explain{
        font-family: $font01;
    }
    h1{
        font-family: $font02;
    }

}

Comments

[kazto]

ご自身のPCにフォントをインストールして、htmlのページはどのように表示していますか？ローカルのファイルを開いているだけでしょうか。それともWebサーバにアップロードする想定でしょうか。

[LEMON_]

ご返信ありがとうございます。

Webページにアップする想定です。

Answer 1

Webページにアップする想定です。

であるなら、LEMON_さんのローカルPCにフォントをインストールしてもまったく意味がなく、全世界の方が同じフォントを使うことができる状態である必要があります。

これを実現するのが「Webフォント」というものです。

Microsoft YaHei についてはWebフォントが提供されているようですが、Goudy-Stout については提供されていないようです。

ローカルで文字を画像として保存し、その画像を表示させる、といった代替手段ではいかがでしょうか。