Webフォントで見栄えをつける

Web制作の仕事で…お客さんがフォントの指示をしてくることが多い。
いいけど…重くなるし、少し面倒にも感じる。
英数文字は良いが、日本語だと文字数多いのでどうしても多くなる……

そこで選択肢はGoogle…たまにしか使わないと忘れるのでMEMOる。

①まずは↓を開きましょう。  Google Fonts


②次に言語設定で、Japanese(日本語)を選択して、日本語対応フォントを表示させます。
日本語対応フォントは8種類だけ…のようだ。
しかもあまりイケてない(汗)

ちなみに…
実際に装飾したい文章を入れるとイメージしやすい




③どれもビビっと来ないけど3つ目のM PLUS 1Pを選択


クリックすると下図のように右側に開きます。
第二水準は文字化けするものもあるので事前にこちらで確認した方がいいね。





③の<link>を選択した場合は、<head>〜</head>の間に記述する必要あり。
@importは場所を選ばずですが、CSSはバラバラに書くのではなく本来あるべきところにまとめて書く方が良い。

私は、中見出しとして<h3 style="font-family: 'M PLUS 1p', sans-serif;">たいとる</h3>
この様に記述して指定しています。
h3 の装飾指定としてもいいですが…。


ちなみにBlogでフォント指定したい場合はLINK

link rel〜を貼る場所
WordPress:[ダッシュボード]⇒[外観]⇒[テーマエディター]⇒右側のバーの[header.php]⇒headタグ内
はてなブログ:[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内にコードを貼付け
Livedoorブログ:[ブログ設定]→[PC]→[カスタマイズ]→[HTMLファイル]⇒headタグ内
FC2ブログ:[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]⇒headタグ内
Blogger:[テンプレート]⇒[HTMLの編集]⇒headタグ内


Web表現技術も年々新しいのが出るので…最新のものでなくとも、少し流行ってるものは取り入れていかないと…ダサいものしか作らないデザイナーだと影で言われるであろうから…ノウハウのアップデイトも定期的に行わないと。

Web制作するだけでは、雑だけどただ安く作る人が増えていて、お客さんも裏側には目がいかないから…職人として捨てれない部分とどう向き合っていくか悩ましい日々である。

つづく




コメント