すると、日本語に対応したフォントのみが表示されます。気に入ったフォントをクリックしてみましょう。ここでは試しにNoto Sans Japaneseというフォントをクリックします。
表示された画面を下にスクロールすると、そのフォントでの文章の見え方を確認できます。type here to preview textという部分で好みの文章を入力すると、下に表示されている文章が変化するので、自分の作品の一部を入力してみてもいいでしょう。 納得したら上に戻り、Get fontというボタンをクリックします。画面が変わるはずです。右上のget embed codeを押してみましょう。
まずは会員登録が必要なので、真ん中右側のstart for freeを押します。 必要事項を入力して、会員登録を済ませましょう。するとkitなるものを作って！という画面が出てくると思います。これを作ることで、個人専用のwebフォント読み込み用jsファイルが作成されるため、早速作りましょう。 kitの名前は何でも構いません。自分のサイトのドメインは登録しておきましょう。その他必要事項を入力したら、自分のkitなるものができあがります。表示したいskin-cover.htmlの</head>直前に発行されたスクリプトコードを貼り付けておきましょう。これで準備が整いました。
Googleフォントとfont Awesomeの使い方
#サイトデザイン突然ですが、「webフォント」というものをご存知でしょうか。これはかの有名なGoogleフォントをはじめとした、ウェブ上にアップロードされているフォントファイル群です。ウェブサイトを見る限りWebフォントを読み込む環境は整っていると言えるので、機種やOSを選ばず統一されたフォントでウェブサイトを見せることができます。その一部は無料で使用することができるため、これらを活用しない理由はありません。早速使ってみましょう。
おすすめサービス
有名どころで無料でもある程度使用することができ、日本語でも紹介記事が数多くあるものはこの2つです。それでは、比較的簡単なGoogleフォントから紹介していきます。
Googleフォントの使い方
まず、Googleフォントのページにアクセスしましょう。URLはこちらです。
(Loading...)...
GoogleフォントはGoogleアカウントを持っていなくても使える上、無料で商用利用可能とライセンスもゆるいので、遠慮なく使ってしまいましょう。
最初はこんな画面が表示されます。
左上のfiltersをクリックして、Languageの部分に日本語フォントを探す場合はjapaneseと、英文フォントを探す場合はenglishと入力して絞り込みを行います。ここでは日本語フォントを探してみましょう。
すると、日本語に対応したフォントのみが表示されます。気に入ったフォントをクリックしてみましょう。ここでは試しにNoto Sans Japaneseというフォントをクリックします。
表示された画面を下にスクロールすると、そのフォントでの文章の見え方を確認できます。type here to preview textという部分で好みの文章を入力すると、下に表示されている文章が変化するので、自分の作品の一部を入力してみてもいいでしょう。
納得したら上に戻り、Get fontというボタンをクリックします。画面が変わるはずです。右上のget embed codeを押してみましょう。
右側にずらりとコードが出てきて驚いたでしょうか。これをhtmlファイルに書き込み、読み込ませることでフォントを表示させているのです。ここではてがろぐでの表示のさせ方を説明しますが、ベタ打ちでもあまり変わらないので参考にしてください。
まず、左側のfull axisボタンをone valueに切り替えます。全ての太さが必要になることはほとんどなく、全部読み込ませるのは無駄だからですね。するとこんな画面になります。必要な太さのボタンをクリックしましょう。選択し終えたら、上側のコードをコピーボタンでコピーし、skin-cover.htmlの</head>の直前あたりにそのまま貼り付けます。わたしのサイトではこのように貼り付けてあります。
続いて、CSSの実装に移ります。お使いのスキンのCSSファイルを開いてください。style.cssと名前のついているものが多いと思います。
もしウェブ全体に適応したい場合、このようにコードを記載します。
body{
font-family: "Noto Sans JP", sans-serif;/*ここは選んだフォントによって変わります*/
font-optical-sizing: auto;
font-weight: 400;/*選んだ太さを入れてください*/
font-style: normal;
}
これで全てのページにこのフォントが適応されることになります。
いやいや一部だけ、例えば見出しだけ反映したい！というときは、タグやクラス、IDなどで指定しましょう。例えばwebfontというクラス名を設定したとすれば、
.webfont{
font-family: "Noto Sans JP", sans-serif;/*ここは選んだフォントによって変わります*/
font-optical-sizing: auto;
font-weight: 700;/*選んだ太さを入れてください*/
font-style: normal;
}
このようにCSSを書くことになります。
思ったより簡単なことがわかりますね。ゼひチャレンジしてみてください。
Font awesomeの使い方
続いて、font awasomeにアクセスしましょう。URLはこちらです。
(Loading...)...
まずは会員登録が必要なので、真ん中右側のstart for freeを押します。
必要事項を入力して、会員登録を済ませましょう。するとkitなるものを作って！という画面が出てくると思います。これを作ることで、個人専用のwebフォント読み込み用jsファイルが作成されるため、早速作りましょう。
kitの名前は何でも構いません。自分のサイトのドメインは登録しておきましょう。その他必要事項を入力したら、自分のkitなるものができあがります。表示したいskin-cover.htmlの</head>直前に発行されたスクリプトコードを貼り付けておきましょう。これで準備が整いました。
サイト上の虫眼鏡マークをクリックし、続いてfreeのボタンをクリックしましょう。無料で使えるアイコンのみが表示されます。気になったものを自由にクリックしてみてください。ここでは、CLASSIC SOLIDのhouseを選択しました。
するとこのようなポップアップが表示されますね。
このままだと表示されている色と大きさで表示されます。もちろんそれでいいのならいいのですが、どうせなら楽したいですよね。左下のパレットボタンを押してみましょう。
すると色、大きさ、アニメーションなどを設定できるページが開きます。これは便利です。色々いじってみましょう。文章中にぽいと置くだけなら、ここで指定するだけでも十分です。
指定できたらhtmlのタブに表示されているコードをコピーし、置きたい場所にペーストすれば完成です。
他にも、htmlとcssのクラス指定で便利な機能を与えることができます。詳しくは公式のドキュメント(英語のみ)か、有志がまとめたブログなどを参考にするといいでしょう。
基本としては、「webフォント」なので扱いは普通の文章と同じと覚えておけば、ひとまずは十分でしょう。
おわりに
なんとなくWebフォントが便利なことだけは理解できたでしょうか。わからなかったらいつでもお問い合わせください。
この記事が困っている個人サイトユーザーに届きますように。