Web

Google fontsの使い方と実装方法(サンプル付き)

投稿日:

Google fontsの使い方と実装方法(サンプル付き)
面倒なことが嫌いなので、楽できることは楽したいと思っています。

カッコいい英字とかフォトショップ、イラストレーター、ファイヤーワークスなどで作って画像を表示させるのですが、
今回、Google fontsを使って英字などを使ってみます。

photo credit: Camil Tulcan via photopin cc

ページコンテンツ

Google fontsとは

Google Web Fontsとは、Googleが提供しているWebフォントの配信サービスである。

Webフォントでは、Webページのフォントをインターネットを通じて取得し、再現するため、閲覧する端末に該当のフォントがインストールされていなくても、指定したフォントを表示することができる。

Google Web Fontsでは、OSSとして提供されているフォントのみ提供されており、どれも無償で利用することができる。主に、フォントの一覧から好きなフォントを探して、プレビュー画面で書式を調整し、自分のページでそのフォントを利用するためのコードを出力する、といった操作でWebフォントが利用できる。

http://www.sophia-it.com/content/Google+Web+Fonts より

Google fontsのメリット

  • 簡単に修正ができる
  • 文字の拡大・縮小も簡単にできる
  • 他のフォントに簡単に変えれる
  • ソースを貼り付けるだけでできる

Google fontsの使い方

Google fonts
http://www.google.com/fonts

たくさんフォントがあるので名前では選べない。。。

Google fonts

赤枠で囲ったところを下にスクロールして気に入ったフォントを探してください。

フォントの確定

今回表示させる文字は 「No music No life」にしてみます。

プレビューで確認することができます。
「Enter own your text」に表示させて確認することができます。

Google fonts

使うフォントが確定しました。

Google fonts

右の小さい赤枠で囲った箇所をクリックします。

Google fontsの設定方法

クリックすると画面が遷移して下記のページに飛びます。

Google fonts

3. Add this code to your website:

4. Integrate the fonts into your CSS:

この3,4に書かれてあるソースを貼り付けて、少しCSSを整えます。

Google fonts

HTMLを設置します

CSSを設置します

cssをヘッダー内に書いています。

あと、head内に「<link href='http://fonts.googleapis.com/css~~~~」を貼り付けるのを忘れないでください。

まとめ

[サンプル] Google fontsを使った文字

よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。

スポンサーリンク
  • この記事を書いた人
  • 最新記事

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

© 2024 Sedori Plan