インターネット上からインストールしたフォントを使いたい

Question

インターネット上からインストールしたフォントを使いたい

HP制作をしていて、インターネットからダウンロードしたフォントをつかいたいです。
HTMLとCSSを使っています。環境はWindows10、開発ツールはVScode、ブラウザはmicrosoft edgeを使っています。
自分のパソコンのローカルにインストールし、HTML、CSSのファイルと同じディレクトリ内にフォント用のフォルダを作り、その中にインストールしたフォントファイルを入れました。フォントファイルは圧縮形式です。
cssでfont-familyとsrcを使うやり方、htmlの要素内に直接書き込むやり方を試しました。
初心者で、使い方を明確に知っておらず、いろいろ調べて試しましたが、反映されませんでした。
また、exeleでフォントが使用できるか確認したところ、選択肢にありませんでした。
何が間違っているのでしょうか？

該当のソースコード

.header{
background:url(img/wood-texture.jpg);
width: 100%;
height: 150px;
font-family: "C:\Users\USER\OneDrive\デスクトップ\オトン";
src: url("C:\Users\USER\OneDrive\デスクトップ\オトン\青柳衡山フォントT.ttf");
}

使いたいフォント

https://opentype.jp/aoyagikouzanfontt.htm

Answer 1

ウェブフォントとして組み込むとよいでしょう

• ウェブフォント - ウェブ開発を学ぶ | MDN

Answer 2

CSSでのフォントファイルの扱いを誤解しています。
srcでの指定はフォントを指定する要素に対してではなく、@font-faceで使うものです。
また、font-familyはフォントファイルのパスを書くものではありません。
このへんを参考にしてください。https://developer.mozilla.org/ja/docs/Web/CSS/@font-face
なお、「HP制作をしていて」ということなのであなたのPC以外で表示させたいものと理解しましたが、その場合フォントファイルをサーバーにアップロードする必要があり、フォントによっては(使い方によっては)規約違反になるのでよく規約を確認してください。

exeleでフォントが使用できるか確認したところ、選択肢にありませんでした。

それはインストールしていないためです。

Comments

[退会済みユーザー]

丁寧に説明していただき、ありがとうございます。
すごくためになりました！

Answer 3

自分のパソコンのローカルにインストールし、HTML、CSSのファイルと同じディレクトリ内にフォント用のフォルダを作り、その中にインストールしたフォントファイルを入れました。

ローカルにインストールとは自分のパソコンにダウンロードしたということでしょうか？
ダウンロードしたフォントはフォントファイルを右クリックすればインストールができます。

.header {
      font-family: フォント名;
    }

インストールしたフォントであれば上記のように使うことができます。

Comments

[退会済みユーザー]

はい。自分のパソコンにダウンロードし、インストールも終わっています。
font-family: "青柳衡山フォントT";
このように書いて再度試しましたが、うまくいきませんでした。

[退会済みユーザー]

書く場所を変えるとうまくいきました！
ありがとうございます。

[mamemaru]

良かったです(#^^#)

[mamemaru]

フォントを指定しているクラスがbodyになっていましたね、、、わかりにくくしてしまって申し訳ないです。
一応.headerにしておきました！