» BASE91詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら

WEBフォントを使ってみよう

知識と経験|2019年01月14日

2019年01月14日
  • このエントリーをはてなブックマークに追加

WEBサイトで使えるフォントは、ある程度決まっています。
すべてのフォントが使えるわけではありません。

なぜかと言えば、ユーザーのデバイスに入っている基本的なフォントしか使えないからです。
どんなフォントを指定したとしても、ユーザーのデバイスになければ表示されません。

しかし、近年になって「WEBフォント」が現れました。
デバイス上にフォントが無くても、様々なフォントが使えるようになったのです。

基本的な仕組みは、インターネット上にアップされたフォントデータを使うこと。
WEBサイトで使えるフォント自体は、色々な会社が開発しています。

ただ、海外のフォントが多く、日本語はまだ数少ないのが現状です。
有料でいくつか日本語WEBフォントを使えるプランはありますが、まだまだ高額です。
今すぐ使えるかと言ったら、少し勇気がいる値段ですね。

なお、現状、メジャーに使われているのは、GoogleのWEBフォントです。
Google Fontという無料サービスがあり、今や世界中で使われるようになりました。

今回はGoogle Fontを使って、フォントに変化を与える方法をお伝えします。
といっても、難しくはないので、ぜひ試しながら進めてみてください。

Google Fontのページでフォントを選ぶ

まず、こちらのページに移動してください。
Google Fontのウェブサイトです。

そしてお好みのフォントを1つ選びましょう。
今回は最も美しい日本語WEBフォントとも称されるNoto Sans JPを選んでみます。

フォントを選んだら、右上の「SELECT THIS FONT」を押してください。
すると、右下からウィンドウが現れます。

そしたら「Embed Font」にある記述をHTMLファイルのEmbedの中に入れましょう。
他のCSSと同じように、フォント用のCSSを読み込みます。

実際にフォントを適応させるときは「Specify in CSS」のfont-familyをCSSに記述しましょう。

以上で、Google FontにあるWEBフォントを使うことができます。
基本的にはコピー&ペーストだけで対応できますね。

他のフォントも同じですので、ぜひ試してみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら