Webサイトでおしゃれなフォントを活用する④- 新米Web担のためのホームページの作り方 | 番外編

今回は先回の記事に引き続き,Webフォントの設定に関して解説したいと思います。

先回は,フォントファイルをダウンロードし,HTMLファイルなどと同じサーバーにフォントファイルを配置する方法について取り上げました。

今回は,もう一つの方法について取り上げたいと思います。

 

 

フォントを提供しているサービスのリンクを張る方法

これは,ページ閲覧の際に,他のHTMLファイルなどと同じサーバーからフォントファイルをダウンロードするのではなく,そのフォントファイルの提供元のサーバーからダウンロードすることを意味します。

つまり,HTMLかCSSにそのフォントの提供元のリンクを張っておくということです。

この方法の主なものがGoogleの提供しているGoogle Fontsです。 ただ,今のところ,このGoogle Fontsには欧文フォントと数字のみで,日本語フォントはないようですので,使える場面は少し限られるかもしれません。

※ Google Fontsのサービスページは英語のページになりますが,操作はそれほど複雑ではありませんので試してみてください。 不明な場合は一層詳しく解説したブログページなどもありますので,参考にすることができるかもしれません。

設定方法は以下の通りです。

 

 

1.Google Fontsサイトにアクセスし,好きなフォントを選択

 

 

2.CSSにリンクを記入

特定のフォントを選択すると,CSSかHTMLに貼り付け可能なURLが表示されます。

そのリンクを張り付けます。 HTMLにも貼り付け可能ですが,全ページにわたってそのフォントを活用したいときはCSS側に張り付けるほうが簡単です。

その際には「@import url(” “)」を使用してください。

つまり,この上の画像で選択しているフォントのリンクをCSS側に張り付ける場合には以下のようになります。

@import url("https://fonts.googleapis.com/css?family=Mukta");

 

 

3.CSSのタグを指定し,「font-family」として記述

特定のタグに対して,先ほど「font-face」でも記述したフォント名を指定します。

例えば以下のようになります。

.font-nasa{
font-family: "Mukta";
font-size: 1.5em;
}

上の例の場合,Class「font-nasa」というタグに対して,font-familyで「nasa」というフォント名を指定しています。

 

 

4.他のファイルとともにFTPソフトでサーバーにアップロード

これはいつものWebページを公開するときと同じ要領で,サーバーにアップします。

そうすることによって,ユーザーはサイトを閲覧するときに,HTMLなどのファイル読み込み時に指定のリンク先に自動的にアクセスし,指定のフォントを読み込むようになります。

 

 

番外編

これは補足情報になりますが,日本語フォントを提供しており,かつWebフォントにも関わらず表示速度の向上のために工夫しているフォントサービスもありますので,ご紹介しておきます。

ちなみに,これは有料ですが,フォントにこだわりたいというサイトであれば活用してみるのもよいかもしれません。

 

 

TypeSquare

 

このフォントサービスはいろいろなサイトで取り上げられており,実際に活用されているようですのです。

関心のある方はぜひのぞいてみてください。

 

 

まとめ

これまで2回にわたってWebフォントについて取り上げてきましたが,Webフォントは今後まだまだいろいろな可能性が広がっていきそうな分野です。

特に日本語フォントがもっと充実してくると,一層自由にWebサイトで表現できるようになるかもしれませんね。

>コアース株式会社

コアース株式会社

業務システム開発一筋32年

コアースは、オーダーメイドでシステム開発を行う大阪の会社です。 特に中小企業様のニーズにぴったりなシステムをご提案いたします。

CTR IMG