コーディングアーカイブ

Webフォントは、サーバ上にフォントを置くことで、閲覧している環境（Mac,Windows等）を問わず、指定したフォントを読み込むことで見せたいフォントを表示することができます！ このフォント使いたいな～でも表示されないかもしれないから画像で代用するか…ということをしなくていいわけです。見出しなど画像にせずにテキストを使うことでSEOにも対応できるわけですね！ 種類も色々とあるので表現したいものに合わせてお気に入りを選んでみてください。 Google Fontの使い方 WebFontは有料のもの、無料利用ができるものとありますが、今回、この記事では無料で利用ができるGoogleFontの使い方の説明になります。では早速取り入れてみましょう。 Google Fontサイトを表示 Google Font サイト：https://fonts.google.com/ Google Font サイトを開いたら、上記のようにフォントが並んだ画面がでてきます。 TOP画面それぞれの使い方 ❶ Sarchfonts：使いたいフォント名が分かればここから検索❷ Update Preview text：表示されているサンプル文を使用目的の見た目で見る事ができます ● Sentence ‥見出し文 ● Alphabet ‥アルファベット・記号 ● Paragraph ‥本文 ● Number ‥数字❸ Type something：表示されているサンプルテキストを変更することができます❹ Fontsize：スライダーでフォントサイズを変更できます❺ 書体別で表示することができます ● Serif ‥ セリフ体 / 明朝体 ● Sans Serif ‥ サンセリフ体 / ゴシック体 ● Display ‥ 装飾系フォント ● Handwriting ‥ 手書き風フォント ● Monospace ‥ 等幅フォント (文字幅が全て同じ)❻ Language：対応言語の選択表示ができます …が、日本語の選択欄はないのでこのままで大丈夫です。❼ Font Properties：チェック欄にクリックしてからスライダー調節で下記のことができます ●Number of styles ‥ フォントスタイルの多さ順で並び替え（フォントの太さ・斜体等） ●Thickness ‥ フォントの太さで並び替え ●Slant ‥ 斜体の傾き具合で並び替え ●Width ‥ フォントの文字幅(縦横比)で並び替え ※‥左から・サイト背景変更（白 / 黒）・リスト⇔グリッド表示・リセットボタン 個別でも下記赤枠のスライダーなどで確認が可能です。ちなみに「Lato」ですが、フォント「Gill Sans」に似ているフォントで、同じく似ているwebフォント「Open Sans」がスタイリッシュなイメージ。「Lato」は字詰めがされていて品のある雰囲気です。Macユーザー御用達「Helvetica」をWinでも…！という方は「Roboto」がオススメです！どれもスタイルの種類が豊富で使いやすいです。 使用フォントを選んで調整 ❶ 使用したいフォント名の横の+ボタンをクリック。右下に別枠がでます。❷ 使いたいフォントを全て選び終えたら、「CUSTOMIZE」をクリック。❸ スタイル全て選択するとフォントの量によってはデータが重くなるため、使用するスタイルだけにチェックを入れます。 ❹「EMBED」をクリック。（フォントをやめる時は、各フォント名横のーボタンで削除できます。）後は、●上赤枠内の&lt;link ~&gt;を使うhtmlファイルの&lt;head&gt;内に。●下赤枠内の css を対応させたいクラスなどにつけるだけ！！これで、webフォントが適用されました！※‥Photoshopなど、デザインソフトでも使いたい場合はダウンロードボタンをクリックでPCにフォントデータをダウウンロードすることもできます。日本語フォントはまだ少ないのですが、アルファベットでは装飾系や手書き風まで色々とあるので取り入れていきたいですね！