なかなか梅雨が明けませんね。
おかげで家の空調代がかからずに少し助かっています。

駅までの坂道がつらくて初めての電動アシスト自転車を買いましたが、この天気でなかなか乗れていないスタッフ「ほ」です。

さて、前回のエントリーではスタッフ「の」がAdobe Fontsについてご紹介しました。
で、そこで「DTP編」とついていたので、本人に「次回はWeb編を書くの？」と聞いたら「いえ、スタッフ「ほ」が書くと期待して…」という答えが返ってきてしまったので、今回のお題は…

「Adobe Fontsを使用してみよう Web編」としてお送りします。

フォント指定はCSSのfont-familyで

まずはWebサイトを作成するときのフォント指定の基本からおさらいしていきます。

Webサイトを作成する際、私たちがフォントの指定をおこなわないと、それぞれのブラウザが自分の好きなフォントを割り当てることになっています。

例えばIEならMS Pゴシック、Win版のChromeならメイリオ、といった具合です。

フォントの指定をする場合はCSSのfont-familyプロパティを使います。

body {font-family:Meiryo;}

ただし、例えばWindowsとMacintoshでは入っているフォントが異なったりしますので、カンマで区切って複数のフォントを第一希望、第二希望といった感じで指定をするのがセオリーです。

body {font-family:”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif;}

閲覧者側のPCにもフォントが必要

ただ、Webのフォント指定で問題なのは、Webサイトを作る人のPCではなく、閲覧する人のPC内からフォントを呼び出して表示するため、閲覧者のPCに指定したフォントが入っていないと、望み通りのフォントで表示されません。

PCにインストールされているフォントは、OSやバージョンによってさまざまです。

そう考えると、すべての人に同じフォントを見せるのはなかなか難しいことなのです。

Webフォント

そこで考え出されたのがWebフォントです。

Webフォントは、フォントをあらかじめインターネット上のサーバーに置いておき、閲覧者のPC内からではなく、このインターネット上のWebフォントを読み込んでもらうことで、すべての人に同じフォントを表示させようとする仕組みです。

Adobe FontsをWebフォントで利用する

Adobe CCユーザーが利用できるAdobe FontsもWebフォントとして利用が可能です。
しかも、利用方法はとってもカンタン。

ざっくりと使用までの流れをご紹介します。

前回、スタッフ「の」がご紹介している方法でAdobe Fontsの一覧ページに移動したら、画面右上にある「日本語モード」をクリックすると日本語フォントのみが表示されるようになります。

一覧から自分の使いたいフォントを探しますが、この時「サンプルテキスト」欄に任意の文字を入力すると、そこで入力された文字列が各フォント見本として置き換わります。イメージがつかみやすくなります。

利用したいフォントが決まったらフォントの説明下部にある</>をクリックします。

画面に「新規Webプロジェクトの作成」というダイアログが開きますので、「OK」をクリックしましょう。

次の画面では「新しいプロジェクト名を入力」欄に任意の名前を入力し、「作成」をクリックします。

次の画面でソースコードが発行されます。上の赤枠の中身をコピーしてHTMLファイルの～の間に貼り付けます。

下の赤枠内に表示されたCSSの設定をCSSコードに追加します。

以上で設定は完了です。

サンプルページを用意いたしました。下記リンクから確認してみてください。

サンプルページ

とってもカンタンですね。

Adobe Fontsには素敵なフォントがたくさん。
ぜひぜひ皆様も試してみて下さい。

バンフートレーニングスクールでは、ホームページの作り方を教える講座も開講中です！
HTMLとCSSを使ってホームページ作ってみませんか？
スマートフォンに対応したレスポンシブWebデザインサイトを作る講座もありますよ！

Web制作講座の詳細はこちら

今回はとても使い易くなってると評判の「Adobe Fonts」DTP編って事でいってみます。
以前「Typekit」と呼ばれていたサービスがグレードアップして名称が変更になりました。
「Typekit」時代、プランによって使用できるフォント数に制限があったりと少し複雑な部分がありました。
「Adobe Fonts」は、制限もなく分かり易くなってます。そして使い方も簡単です。

まず「Adobe Creative Cloud」アプリから「フォント」をクリックします。
（Adobe IDでサインインを忘れずに）

「フォントを参照」をクリックするとブラウザソフトが立ち上がり、フォント一覧が表示されます。

後は使用したいフォントを「アクティベート」→「アクティブ」にしていくだけです。
太さ違い等、複数ある場合はその数が表示されています。
一気にアクティブにもできますし、選んでアクティブもできます。

更に「フォントパック」から入れば、一気にアクティブも可能です。

Adobe Creative Cloudアプリで沢山のフォントがアクティブになっている事が確認できます。

アクティブにすると様々なアプリで使用可能となり、InDesignの「OpenType機能」も使用できます。

【注意点】

フォントはPCにインストールされる訳ではなので、Adobe CCの契約が切れれば使用できなくなります。

DTPで使用の場合、AiやIDのネイティブファイルでの入稿は印刷屋さんに対応状況を確認した方が良いです。
（会社のセキュリティ都合上オフラインで使用してる場合があります）

さて「Adobe Fonts」の話ではないのですが、5月に「Adobe CC」関して「2つのメジャーバージョンのみが導入できるようにする」と発表がありました。
「Adobe CC」は、CS6以降の全バージョンが使用できる。というのも1つの売りだった気がするのですが、今後PCの買換え等ある場合は注意した方がよさそうです。
既に現状、CC2019と2018のどちらかしかインストールできません。
（Illustratorの場合、23がCC2019、22がCC2018です）

バンフートレーニングスクールでは、インデザインが最短２日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
無料体験も行っておりますので、ぜひお気軽にご参加ください。

インデザイン講座詳細