LoginSignup
4

More than 5 years have passed since last update.

Googleフォントを自サーバー上で使う!

Posted at

サイトのヘッダーに使用する為にGoogleフォントからかっこよさげな物を拝借したもののローカル環境ではフォントが反映されないので調べてみました。

Google Fontsから使いたいフォントをダウンロード

まずGoogle Fontsから使いたいフォントを選びます。
セレクトするとダウンロードの矢印が出るので一旦自分のPCにダウンロード。
zip形式でダウンロードされるので展開。
使いたいサイトのディレクトリ内に適当なディレクトリを作成。
僕はわかりやすくfontsという名前にしました。
展開されたディレクトリ内にある2つのファイルをそのディレクトリに移動。

CSS内にfont-face設定

使用したいサイトに使用しているCSSファイルに先程移動してきたフォントを使用できるように設定。
僕はBlackOpsOneというフォントをダウンロードしたのでこのような記述にしました。

style.css
@font-face {
    font-family: BlackOpsOne;
    src: url('./fonts/BlackOpsOne-Regular.ttf') format("truetype");
}

これで使用準備は出来ました。
あとはそのフォントを使用したい箇所にfont-familyを設定すればOK。

    font-family: 'BlackOpsOne';

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4