@font-faceは、インターネット上のウェブページにフォントを表示させるためのCSSルールですこのルールができる前は、ウェブマスターは自分のサイトで、最も般的でユーザーのコンピュータにインストールされている限られたフォントのセットを使用することができましたfont-faceの登場により、任意の特定のフォントを簡単にウェブサイトに添付することができるようになりました
私たちのサイトでフォントをダウンロードした場合、フォントのアーカイブに、コピーしてプロジェクトに添付されたCSSドキュメントに配置する必要がある準備ができているCSSコードがあります
ステップバイステップでインストール
1. ご希望のフォントを選択し、「ウェブサイト用にダウンロード」をクリックします
2. サイトのルートに fonts フォルダを作成し、ダウンロードしたフォントをコピーします
CSSドキュメントを開き、アーカイブからテキストファイルの内容をその中にコピーしてください
4. フォントフォルダへのパスが正しく綴られているか確認してくださいフォントが置かれているフォルダの位置によって、パスには1つ以上のドットが含まれている場合があります
5. 完了ですファミリー名のプロパティをコピーして、スタイルを書いているセレクタに貼り付けます
すでに他の場所でフォントをダウンロードしていて、それをプラグインしたい場合はどうすればよいですか？
この場合、インターネット上でフォントコンバータを見つけ、ttfフォント（またはotf）を正しいフォーマット、すなわちeot、svg、woff、woff2に変換する必要がありますこれは、フォントがすべてのブラウザ、およびモバイルデバイスで正しく表示され、動作するようにするためです
そして、@font-faceルールの構文を尊重しながら、自分で綴る必要があります
フォントフェイス（@font-face）の構文
ルールの構文は、大きく分けて基本プロパティと上級プロパティに分けられる
基本です：
- font-family - は、フォントの名称を指定します
- src - は、フォントのパスを示しますこれは、あなたのウェブサイトのサーバーにあるフォントのURL、他の誰かのサーバーにあるフォントのURL（Google Fontsなど）、または単にユーザーのコンピュータにあるフォントの名前（Helvetica New Bold、Tahoma、Georgiaなど）であるかもしれません
拡大されました：
- font-display - は、フォントがダウンロードされ、使用可能な状態にあるかどうかによって、どのように表示されるかを決定します
- font-stretch - では、文字の幅を調整することができます
- font-style - は、フォントがプレーンか、イタリックか、斜めかを決定します（後者2つは同じではありません）
- font-weight - フォントの彩度を100～900（100-small, 900-small）の範囲で設定します
- font-variant - は、小文字をどのように表現するか、そのままにするか、すべて小文字（大文字）にするかを決めます
- font-feature-settings - は、OpenTypeフォントの高度な組版機能を管理することができます
- font-variations-settings - は、4文字の軸名を指定することで、Open TypeおよびTrueTypeフォントのバリエーションを低レベルで制御することができます
- unicode-range - は、フォントで使用するUnicodeコード（グリフ）の範囲を指定します
Google Fontsでフォントをサイトにつなげる
Google Fontsを使用すれば、フォントをウェブサイトに接続する最も簡単な方法です彼らのウェブサイトに行き、欲しいフォントを見つけ、インストールする正しいフォントを選択し、コードをコピーします
コピーしたコードは、htmlページのheadタグの本文に記述してください
この方法の欠点は、サイトの作成中にインターネットが使えなくなった場合、フォントが表示されず、標準的なものに置き換わってしまうことですまた、レイアウトのプレゼン（または確認）のためにクライアントを訪問した際、クライアントがWi-Fiを持っていない場合、この問題が再び発生する可能性があります
