webフォントとしてAdobe Fontsを使う方法

google fontsかダウンロードしたフォントしか使ったことがなかったのですが、

Adobe Fontsを使う機会があったので使い方をまとめました。

今回はAdobe Fonts内にある源ノ角ゴシックとTA Nasubiをfont-familyを適用してみます。

コーディングする方には参考になるかと思います！

Adobe Fontsを適用するプロセス

フォントを探す

Adobe Fontsより使いたいフォントを探す

プロジェクトのタグをhead内に埋め込む

埋め込み方法は様々ですが今回はjavascriptで

style sheetにcssをコピペ

コピペなので簡単！

Adobe Fontsにアクセスする

まずAdobe Fontsにアクセスします。

使用したいフォントを検索する

源ノ角ゴシックを検索する。

検索結果をみると、源ノ角ゴシックが出てきましたね。

使いたいフォント（今回は源ノ角ゴシック）の</>のマークをクリックします。

プロジェクトの決定とフォントの太さの決定

プロジェクト名とは？？

プロジェクトはフォントを格納しておくフォルダのようなもので、それぞれのプロジェクトにはIDが振り分けられています。

プロジェクト名はサイト名と一致させるのが吉

例えば今「はろはる」というサイトを作成するとします。

その場合プロジェクト名を「はろはる」に設定するとわかりやすいと思います。

そうすることでサイトごとにフォントの管理ができます。

「はろはる」というプロジェクトを作成し、使用したいfont-weightにチェックを入れ、「作成」ボタンを押しましょう。

この「はろはる」というプロジェクトの中に使用したいフォントを入れていきます。

2つめのフォント(ここではTA Nasubi)を選ぶ際は、ドロップダウンメニューから「はろはる」を選び、保存するだけです。

ここまでで源ノ角ゴシックとTA Nasubiというフォントが「はろはる」と名付けられたプロジェクトに入っていることになります。

headの中にadobe fontsのタグを埋め込む

いよいよhtmlの中にadobe fontsを埋め込んでいきます。

タグを埋め込む方法はいくつかありますが今回はjavascriptのコードをheadタグ内に埋め込みます。

以下リンクにはjavascript以外での埋め込み方法も記載されています。

参考埋め込みコードAdobe

プロジェクト名とフォントの太さを決定すると、その次のポップアップにコードが出現します。

このコードを<head>の中にコピペします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>adobe fontsをwebフォントとして使おう！</title>
  <link rel="stylesheet" href="css/style.css">
  <!-- コードをこの中に貼り付ける -->
  <script>
    (function(d) {
      var config = {
        kitId: 'ここにプロジェクトごとのIDが入る',
        scriptTimeout: 3000,
        async: true
      },
      h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
    })(document);
  </script>
  <!-- コードをこの中に貼り付ける -->
</head>
<body>
</body>
</html>

CSSの追加

cssにfont-familyを追加します。

先程のjavascriptのコードの下には選択したfont-weightのcssコードが出現します。

このcssをstyleシートに貼り付けます。

スクリーンショット青枠内の「プロジェクトを編集」より、

「はろはる」内にあるフォント一覧の確認や使いたいフォントのコピー、編集ができます。

今回は源ノ角ゴシックだけではなくTA Nasubiのフォントもコピーしたいので、「プロジェクトを編集」を押します。

それぞれ選択してコピペしましょう！

<p class="gennikaku">源ノ角ゴシック</p>
<p class="nasu">ta-nasubi</p>

.gennokaku {
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nasu{
  font-family: ta-nasubi, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
}

Adobe Fontsの適用結果

源ノ角ゴシック(1行目)とTA Nasubi(2行目)が適用されました。