読者です 読者をやめる 読者になる 読者になる

Fire Engineering

化学の研究者→消防士→ITエンジニア(2016年11月〜)

Google Web Fontsを使ってみた。

はじめに

 Webフォントとはwww上からフォントを表示する技術です。Webフォントを導入すると、サーバー上にあるフォントファイルを参照するため、ユーザーのPCにインストールされていないフォントを表示することができるようになります。今回は私が以前作成した自身のポートフォリオにWebフォントを導入してみます!

なにを使うか

 Webフォントにもいろいろありますが、今回は代表的なWebフォントの一つであるGoogle Web Fontsを使ってみたいと思います。Google Web FontsはGoogleの提供しているWebフォントです。すべて無料で、ソースの読み込みも簡単そうなので、これにしました。

Google Web Fontsの使い方

 ではさっそく、Google Web Fontsを使ってみたいと思います。導入方法はいくつかありますが、一番簡単そうなlinkタグを使うやり方でやってみます。

 まずは、使いたいフォントを見つます。Google Web Fontsのサイトから使いたいフォントを見つけてください。

 今回は、下のような「Kushan Script」という特徴的なフォントを導入してみます。

f:id:hirotsuru314:20160427160626p:plain

 まず、右下の「Add to Collection」ボタンを押す→Collectionの中の「Use」ボタンを押す→すると下のような「Add this code to your website: 」というところにlinkタグが出てきます。

f:id:hirotsuru314:20160427160632p:plain

これをHTMLのheadタグの中にコピペします。

<!-- Web Fonts -->
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

そして、CSSでフォントを適用したいタグに

font-family: "Kaushan Script", cursive;

とするだけです。

 今回は、ポートフォリオの左上の「Hirotsuru’s Portfolio」のところに適用してみたので、ビフォーアフターで見てみましょう。

ビフォー

f:id:hirotsuru314:20160427161852p:plain

アフター

f:id:hirotsuru314:20160427160642p:plain

 フォントが変わりましたね。以上です!

終わりに

 今回、Google Web Fontsを初めて使ってみて一番の感想は、使い方がめちゃくちゃ簡単だということです。上記の作業は5分くらいしかかかっていません。

 それともう一つ私がWebフォントを使うといいなーって思ったことがあります。私はMacユーザーでブラウザにはChromeSafariを使っているのですが、ポートフォリオを作成した際、WindowsmのIEで動作確認してみたところ、フォントが変わってしまうという問題がありました。Webフォントを導入すると、そのような問題も解決されるので、非常に助かります。実際に、手持ちのWindowsで確認してみたところ、同じフォントが表示されたので感動しました!  

 これからも自身のポートフォリオを実験台に様々な機能を導入していきますので、乞うご期待!