【Webサイト制作】使いたいフォントの設定方法が分かりません

Question

実現したいこと

「ラグラン」というフォントを使用したいです！

発生している問題・分からないこと

CSSで下記のように記述しても反映されません。

該当のソースコード

h1 {
  font-family: 'ラグラン';
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ChatGPTにお尋ねし下記2パターンの回答の通りに設定しましたが、どちらも反映されませんでした。
●パターン①
style.css

@font-face {
    font-family: 'Raglan';
    src: url('raglan.woff2') format('woff2'),
         url('raglan.woff') format('woff');
}

h1 {
    font-family: 'Raglan', sans-serif;
}

●パターン②
index.html

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raglan">

style.css

h1 {
    font-family: 'Raglan', sans-serif;
}

補足

webサイトで使用するフォントの設定方法についてお詳しい方アドバイスいただけますと助かります。
よろしくお願いいたします！

Comments

[Refrain]

現状のソースをGithubなどで公開可能ですか？
また、一度`!important`の追加も試してみて欲しいです。

[Refrain]

例えば対象要素がより高得点なセレクタで装飾されている場合、そこでフォントを変更していると反映されないことがあったと覚えます。

[narururu]

ご回答ありがとうございます。Refrainさん☺

>対象要素がより高得点なセレクタで装飾されている場合、そこでフォントを変更していると反映されないことがあったと覚えます。
はい。この点については認識しております。現状、他の要素に設定はしておりません。
また、他のフォントでは反映されており、ラグランが反映されない状況です。

[m.ts10806]

質問が「受付中」となっていますがコメント等を見ると締め切っても良さそうに思います。
何か模索されるのでしたら質問本文に追記してください。
「諦めた」でそのまま終わるのでしたら解決済みとしてください。

[narururu]

ご連絡ありがとうございます。m.ts10806さん☺

クローズいたします！

Answer 1

ラグランは有償フォントですのでデラゴシックワンで代替するとかどうでしょう？

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
<style>
.dela{
font-family: "Dela Gothic One", sans-serif;
} 
</style>
<h1 class="dela">ラグランではなくデラゴシックで代替します</h1>

Comments

[narururu]

ご回答ありがとうございます。yambejpさん☺

ラグランは有償なのですね。
ご提示のコードでデラゴシックワンは反映されました。ありがとうございます。

しかし、私がイメージするデザインとは違うため、有償でもラグランを使用したいと思っています。
（今回対象の文字が漢字+英語で英語のフォントがイメージと違いました）

※追記
調べてみたら下記サイトで購入する必要があるのですね。月額1100円は厳しいですね。。諦めます。。アドバイスありがとうございました。
https://fontplus.jp/service/pricing