東京のWeb制作会社LIGLIGならできるおもしろいこと。この記事は、2015年4月21日に公開された記事を、最新状況を踏まえて再編集したものです。先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。逃げていたかった......現実から......。いう話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。Fonts(欧文フォント/和文フォント)FONTPLUS(欧文フォント/和文フォント)まとめWebフォントWebフォントを導入すると、サーバー上にあるフォントファイルを参照するため、ユーザーのPCにインストールされていないフォントも表示できるようになります。いちいち自分のローカルにインストールする必要もないので、めっちゃ便利です。Webフォントを使うことで、サイトのデザイン性を向上させることができますし、何よりサーバーから読み込むため、iPhone、Android、PC、どの端末でも共通のフォントを表示させることができるというメリットがあります。CSSを触る必要があるので、Webフォントは難しいと思われがちですが、ほんのちょっとの手順を踏めば、案外簡単に利用できます。忙しいという理由で後回しにしている方も多いのでは?今回はそんな方のために、Webフォントに関するサイトのまとめと、使い方を簡易的にお伝えします。一回だけサクっとやってみちゃってください!案外それをきっかけに興味を持つものだと思うので、僕はきっかけづくりができればいいかな〜なんて良い人ぶって書かせていただきます。Webフォントの使用手順ではさっそく、下記の手順を参考にWebフォントの設定をしてみてください。使いたいWebフォントを見つけるまずは、使いたいフォントを見つけてください。欧文フォント、和文フォント、アイコンなど、使うフォントによって、出力できるものが異なるのでご注意を。フォントを見つけられるサイトは、このページの一番下にまとめてありますので良かったらご覧ください。Webフォントサイトのまとめへこのとき、ローカルに使用したいフォントがある場合は、※サーバへアップロードしてください。※ライセンス確認は必ず行ってください。著作権フリーでも再配布禁止のフォントはたくさんあるので、ご注意ください。CSS3の@font-faceでフォントファイルを指定CSS3の@font-faceでフォントファイルを読み込ませます。念のためですが、第3者サーバにあるフォントに関しては絶対パスになります。Fontsに関しましては、フォントを選ぶとCSSを提供してくれるので、それを読み込ませるだけになります。Fontsの指定は後ほど。CSSを読み込ませた状態で、下記の記述をします。確認(おわり)とりあえず、だいたいこれで終わりです。ブラウザで確認してみてください。検証となりますので、IEを使う場合は最新版で行ってくださいね。Fonts)この手順ですら面倒だと思う方は、下記のソースをメモ帳かなにかに貼り付け、HTMLにしてブラウザで確認してみてください。Fontsを利用してWebフォントを表示しています。今回は、わざと分かりやすいようなフォントを選んで使わせていただいております。本当に簡単でしょ?WebフォントサイトまとめいくつかWebフォントサイトをまとめたので、紹介していきたいと思います。Fonts(欧文フォント)http://www.google.com/webfontsGoogleの提供しているWebフォントサイトです。すべて無料で使用できるので、とりあえず困ったときはここを使っておけばいいと思います!Fonts.com(欧文フォント/和文フォント)http://www.fonts.com/ja海外では結構有名なWebフォントサイトで、有名企業も取り入れているようです。無料と有料プランがあります。Helveticaをよくお使いになる方は、ここです。Fontspring(欧文フォント)http://www.fontspring.com/海外製のフォントメーカーのほとんどを網羅しているサイトです。ショッピングサイトですが、無料のものも見つけることができます。Squirrel(欧文フォント)http://www.fontsquirrel.com/海外のSOHOの方のサイト(ソース見ると)で使っている方がいらっしゃいました。すべて無料なので、個性的なフォントを探すと良いものが見つかります。TypeSquare(和文フォント)http://typesquare.com/和文フォントではとても有名ですね。日本のフォントメーカーであるモリサワのWebフォントサービスです。有料であり、PV(ページビュー)を基準にプランが変わります。FONTPLUS(和文フォント)http://webfont.fontplus.jp/フォントワークス、イワタ、モトヤ、白舟書体、モリサワなどの大手フォントメーカーが参加するWebフォントサービスです。有料ですが、有名フォントがかなり豊富なため、利用している大手企業も多いようです。もじでぱ(和文フォント)http://mojidepa.com/文字のデパート(たぶん)です。有料となりますが、たくさんフォントがある上に料金も安いので、自分でフォントを見つけてサイトに使用したい方におすすめです。Fonts(欧文フォント/和文フォント)https://fonts.adobe.com/アドビシステムズが提供しているフォントです。有料となりますが、たくさんフォントがある上に料金も安いので、自分でフォントを見つけてサイトに使用したい方におすすめです。FONTPLUS(欧文フォント/和文フォント)https://fontplus.jp/ソフトバンク・テクノロジーが運営しているサイト。こちらも有料ですが、特徴としては全2873書体(2019年7月現在)が使えるという圧巻の書体数。まとめ今回は、Webフォントを触ったことのない人向けに、表示をするためだけのシンプルなWebフォント使用法の紹介しました。本当は、拡張子ごとの対応ブラウザやhtml5.jsを使うポイント、cssfonts-min.cssを読み込ませてブラウザ間での表示を統一化させる方法など、説明をしたいことがたくさん。Fonts」にWOFF2以外のフォントをリクエストする方法2018.11.06ダイナフォントでサイトにもうひと味!デザイナーでもカンタンにWebフォントを実装する方法2017.02.07Webデザイナーの私がお世話になっているフォント9選2017.01.03資生堂『花椿』がWebフォント『TypeSquare』を選んだワケ2016.11.14Webフォントの実装が当たり前になる時代は来るのだろうか?LIGのデザイナーにインタビューしてみた2016.01.26【株式会社LIGについて】わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。Webフォントの知識を活かした制作実績も!Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。