Typekit practice

Usage

There are two ways you can work with the Typekit API client: directly through the class variables, or via an instance of the object. Either way, beware that the token you provide will be assigned to a class variable (ie. it’ll be shared across instances of Typekit::Client). This is due to the way HTTParty works.

Quick and simple…


Or just add the gem to your Gemfile and run

Using the API without an instance of Typekit::Client

If you prefer using the class methods directly to query for kits/families, the following is identical to the above methods…

Lazy Loaded Detailed Attributes

Detailed information for kits gets loaded lazily when you use . This allows us to create instances of without the full set of attributes and without requiring you to manually load that data.

Updating a Kit

You can make changes to a Kit by altering the attributes and calling :

Publishing Manually

When you call , the kit is also published. If you don’t want this to happen, pass as the only argument. You can also manually publish a Kit after making changes.

Getting Library Information

The Typekit API allows you to both list the available libraries and view a list of families within the library. The list of families does not include the more detailed information found in the family-specific API calls.

Getting Font Family Information

The Typekit API also allows you to find detailed information about any Family in their library, including all available validations, CSS font names, etc.

Note: Variations, like Kits, have detailed information loaded lazily. If you would like to load data for a Variation without accessing an individual attribute you can simply call .

Adding a Family to a Kit

You can add Families to a kit by specifying the Family ID (which can be found through the methods) and which you want to have included in the Kit. These methods make changes to the «working» copy of your Kit. In order for them to take effect, you must publish your Kit after adding/updating/removing Families.

Important Note: Families and Variations that are a part of Kits are passed around as Hashes, not instances of or , which are used solely browse the available Families and their details.

【第2回】Glyphsで作る和文フォント〜とっても便利なコンポーネント〜 #Glyphs #グリフス

こんにちは! タイプデザイナーの吉田です。 今回は濁音・半濁音や拗促音などを作成する場合に便利な「コンポーネント」という機能を中心に進めていこうと思います。よろしくお願いします! 目次 コンポーネントとは 作ってみよう コンポーネントの配置 濁点の配置 半濁点の配置 コンポーネントの長所   コンポーネントとは まず簡単にコンポーネントとは一体何なのか、そして具体的にはどうやって使うのかを解説します。 コンポーネントとは同じアウトラインを複数のグリフで効率よく使い回すことのできる機能です。(Glyphs公式ハンドブック より引用) それだけ聞くと上級者向けの機能のようですが、誰でもお手軽に使える、和文フォントの制作には欠かせない機能です。 ではまず、そのコンポーネントを使う場面からご紹介したいと思います。 和文フォントで一番使う機会があるのは、濁音・半濁音のグリフを作る時だと思います。 第一回の記事は平仮名の「あ」を使って説明しましたが、次は濁音・半濁音のグリフを一緒に作っていきましょう!   作ってみよう ではグリフ一覧のメニューから「は、ば、ぱ、voicedcomb-kana、semivoicedcomb-kana」を同時選択してcommand+Tまたはダブルクリックで開きます。 「voicedcomb-kana」は下の[発音記号]の区分の中に入っています。 ではまず「は」から制作します。 「は」を描画したら隣の「ば」のグリフをダブルクリックして選択します。   コンポーネントの配置 「ば」を制作する時、「は」のグリフからアウトラインをコピー&ペーストで制作を始めてもよいですが、今回はコンポーネントを使っていきます。 [command+Shift+C]、または右クリックから[コンポーネントを追加]で、「ha-hira」のグリフを検索して選択します。 これで「ha-hira」の中に入っているアウトラインがコンポーネントとして配置できました。 コンポーネントとして配置されたアウトラインはこのようにグレーの塗りで表示されます。   濁点の配置 次は濁点の制作です。2つ隣の「voicedcomb-kana」をダブルクリックし、こちらに濁点の形をパスで描画します。 そしてもう一度「ば」の編集に戻り、先ほどの手順で「voicedcomb-kana」をコンポーネントとして配置します。 配置したコンポーネントは右や上にあるツールで、拡大縮小、回転、反転などの変形ができます。 さあこれで濁音のグリフを作成できました!   半濁点の配置 同じ手順で半濁音のグリフも作成しましょう。ここで軽くツールの説明もしたいと思います。 半濁点は円を使うことが多いので、今回は図形の描画もご紹介します。 先ほど編集した「voicedcomb-kana」の隣の「semivoicedcomb-kana」をダブルクリックで選択します。楕円の描画は上のツールアイコンの左から5つ目を選択してください。長押しするとプルダウンが出てきて、多角形か楕円のどちらかを選択できます。 そのツールの状態で画面をクリックし、幅や高さを入力すると、楕円を描画できます。(またはShift+ドラッグで正円を描画) パスで作ったオグジェクトを選択するには、パス全体をドラッグで囲うか、輪郭の付近でダブルクリックします。 円を選択→[command+C]でコピー→[command+V]でその場にペーストします。 同じ位置に円を2つ描画できたら、2つ重なったうちの1つの円を選択して右のツールバーの[変形]を使って縮小します。 しかしこれだけでは黒い円の上に小さい円が重なっているだけになってしまっているので、前回説明した「パスの方向を逆転」を使って小さい円を反転させます。内側の円を選択して、 [右クリック]→[選択パスの方向を逆転] すると、下のプレビューで分かるように内側の円が反転した半濁点ができました。   そして「ば」と同じ手順で「pa-hira」にコンポーネントを配置すれば「ぱ」の完成です! コンポーネントの長所 さて、今の段階ではアウトラインをコピー&ペーストしたのと同じ状況です。果たしてこの機能の何が便利なのか。それをこれから解説していこうと思います。 コンポーネントの機能が最大限発揮されるのは、ズバリ「コンポーネント元のグリフの形に変更があった時」です。フォントを作っていると、細かいデザインの修正を何度を行います。 例えばコンポーネントを使わずに「ぱ・ば」を作成した場合、元となる「は」のデザインを修正したらそれに追随する「ば・ぱ」も同じような修正をしなければいけません。 「は」を修正した後「ば・ぱ」にコピー&ペーストすれば済む話ですが、修正が加わる度にそれをするのはかなり手間になってしまいますし、もしコピー&ペーストを忘れてしまったら大変なことになってしまいます! では実際にどのように便利なのかをご覧ください。

【連載第1回】Glyphsで作る和文フォント〜最初の設定が肝心〜 #Glyphs #グリフス

はじめまして!4月からアドビで書体デザイナーとして入社した吉田大成と申します。 私は大学の卒業制作で「はくれい」という明朝体を作ったのですが、その時に「Glyphs」というドイツのグリフス社のフォント作成アプリを使っていました。全ウェイトを含めると5,000字を超えるフォントの制作にGlyphsは欠かせない存在で、はくれいはパス(輪郭線)の描画からフォントデータの出力まですべてこのソフトだけを使って制作しました。 これまで卒業制作の一環としてGlyphs自体をずっと研究していたのですが、フォントの制作と展示準備を並行しながら進めていて、なかなかその研究についてを文章にすることができていなかったので、一度その内容をしっかりまとめたいと考えて、この記事をブログに書こう!という思いにいたりました。 Twitterでつぶやいてみたところ 、うれしいことに「ぜひ読みたい」という反響もあって、 Adobe Typekit 公式ブログで連載することにしました。記事は、数回に分けてゆるく不定期に投稿するつもりですので、しばらくお付き合いください。 記事の中身は、基本的な作業プロセスから、あまり知られていない機能の紹介、アドビの和文フォントのGlyphsでの制作秘話まで、幅広い内容にしたいと思っています。 ただ、学生時代の経験をつづったものなので、自己流で知識の足りない面も多々ありますが、その点はご容赦ください。 学生時代に、私がこのようにしてフォントを作っていたという、Glyphsを使った制作事例のひとつとして読んでいただければと思います。すでにGlyphsを使ったことがある方にも、この記事がおさらいのきっかけになればと思います。   目次 Glyphsについて 和文フォントのための準備 グリフの追加 パスの描画 フォントの出力   Glyphsについて Glyphsの機能は非常に充実していて、学生からプロの書体デザイナーまで、広い範囲の人にとって使いやすいソフトだと言われています。インターフェースもすっきりとしたデザインで、フォント制作の初心者でも直感的に使えると思います。 Glyphsは、下記のリンクから購入できます。 https://glyphsapp.com/buy ちなみに「Glyphs Mini」という縮小版も購入することもできます。こちらはフルライセンス版と違って和文フォントは作成できないので、このブログ記事ではフルライセンス版の「Glyphs2」についておもに紹介します。 Glyphsの使用には、Macの10.9.5以降が必要で、Windowsバージョンはありません。 最初に、アプリケーションを立ち上げたら、[ファイル> 新規フォント]または[command+N]で、フォント作成メニューが表示されます。   和文フォントのための準備 まず、和文フォントとして出力するための設定から始めましょう。 画面左上の[ i ]のアイコンを選択、または[command+i]で情報パネルを表示します。 パネルの上部に[フォント、マスター、インスタンス、フィーチャー]などのタブがあります。 まず、開いたままの[フォント]の項目を入力していきます。 画面下部の[カスタムパラメータ]の[+]をクリックして画像のようにプロパティを選択し追加します。 [glyphOrder]は、フォントを作る上で必要な[.notdef]と[space]を、フォントに収録される文字の先頭に来るように設定しています。 値は手入力で[.notdef(改行)space]と入力してください。 [ROS]は、フォントに収録される文字を定義する項目で[Adobe-Identity-0]と設定することで、日本語環境に対応したフォントを作ることができます。 続いて隣の[マスター]のタブを選択してください。 [メトリクス]のアセンダーを880に、ディセンダーを-120と入力してください。 こうすることでグリフが入る枠の高さが1000に設定されます。 最後に[その他の設定]の[コンポーネントの自動整列を解除]にチェックを入れて、情報パネルを閉じてください。 和文フォントは欧文フォントと構成が違う点があるので、少し手間がかかるのですが、最初にこのように設定をしておく必要があります。 楽しい文字作りのために、もう一息がんばりましょう!   グリフの追加 さあ、フォント情報の設定が終わったらいよいよ文字の制作です。この状態だとアルファベットしか入っていないので、この中に日本語のグリフを追加していきます。 左のメニューの[和文]を開いて[かな]を右クリックすると[足りないグリフ]が出てきます。[command+A]で全選択して[生成]をクリックします。すると右のグリフ一覧にひらがなカタカナがすべて追加されます。 グリフの生成は上のメニューの[Glyph]>[グリフを追加]または[command+shift+G]で入力ウィンドウが出てくるので、そこに入力して指定のグリフ生成を行えます。 ・任意のグリフを追加したい場合(半角または全角スペースで区切って入力) 例: 「愛 東 国」→ 愛国東 が生成! ・ある範囲を一括で追加したい場合(:半角コロンで区切って入力)

Get Started

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    : {
      families: 'Droid Sans', 'Droid Serif'
    }
  });
</script>

Alternatively, you can link to the latest version of the Web Font Loader by using as the source. Note that the version in this url is less specific. It will always load the latest version, but it also has a shorter cache time to ensure that your page gets updates in a timely manner. For performance reasons, we recommend using an explicit version number (such as ) in urls when using the Web Font Loader in production. You can manually update the Web Font Loader version number in the url when you want to adopt a new version.

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts;
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

The FOUT can be more easily avoided when loading the Web Font Loader synchronously, as it will automatically set the class on the HTML element as soon as has been called. The browser will wait for the script to load before continuing to load the rest of the content, FOUT is avoided.

Web Font Loader is also available on npm as a CommonJS module. Just and then require it in your code.

  var WebFont = require('webfontloader');

  WebFont.load({
    : {
      families: 'Droid Sans', 'Droid Serif'
    }
  });

CSS3 @font-face

Свойство @font-face было впервые предложено в CSS2 и внедрено в браузере Internet Explorer с версии 5. Однако эта реализация основывалась на закрытом формате Embedded Open Type (.eot), и другие браузеры не использовали этот формат до выхода Safari 3.1.

С тех пор веб-дизайнеры стали использовать на сайтах шрифты в форматах .ttf и .otf, и сейчас это свойство широко известно.

CSS

@font-face {
  font-family: '3DumbRegular';
  src: url('3Dumb-webfont.eot');
  src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}
h1 {
  font-family: '3DumbRegular', Arial, sans-serif
}

Плюсы 

  • Можно выбирать из большого количества шрифтов.  Полный список можно посмотреть здесь.
  • Работает во всех браузерах.
  • Не нуждается в JavaScript. 

Минусы 

  • Несколько дольше внедрять, чем Google Font API, так как больше кода.
  • Качество отображения шрифтов может быть разным у разных браузеров.
  • Проверка кода CSS может не пройти, в зависимости от тега DOCTYPE.
  • Не очень широкий выбор бесплатных русских шрифтов.

Code

Blocks of code should be wrapped with with a class of “code-block” applied. For example:

try {
   Typekit.load({
     loading: function() {
       // Javascript to execute when fonts start loading
     },
   })
 } catch(e) {}

An opening curly brace should be on the same line as the selector or command, while a closing brace should be set on its own line. Subsequent lines should be indented with two spaces each (no tabs, please).

Groups of CSS selectors (separated by commas) should each be on their own line with no indentation. E.g.:

p,
blockquote {
  color: #333;
  font-style: normal;
}

There should be no space between the property and colon, one space between colon and value, and no spaces between value and semicolon.

Inline code should be wrapped with

【第3回】Glyphsで作る和文フォント〜拗促音を作ろう〜 #Glyphs #グリフス

こんにちは!タイプデザイナーの吉田です。 今回は前回使ったコンポーネントを利用して拗促音(「っゃゅ」など小書きの文字)を制作していきます!   目次 拗促音の作成 コンポーネントの配置 背景レイヤー 分解後の調整 縦組み用グリフの作成 フィーチャーの設定 vertグリフの応用   拗促音の作成 拗促音も前回覚えたコンポーネントを使って制作します。(忘れてしまった方は前回の記事をどうぞ!) 今回は、前回使ったタブを開いたまま、続けて編集をしてみようと思います。 上の[テキストツール]を選択、または[T]を押すとテキスト入力モードに切り替わります。 テキストツールで何か文字を打ってみましょう。例えば、「きゃ」と打ってみます。 すると画面に「き・ゃ」が出現しました。 上の[選択ツール]で編集したいグリフをダブルクリックで選択すると、今まで通りグリフの中を編集することができます。 まずは「き」と、「ゃ」の親字である「や」を作成します。「や」もテキストツールで入力して追加で編集してみましょう。   コンポーネントの配置 続いて「ゃ」のグリフに移動して、前回の濁音と同じようにコンポーネントを配置します。 右クリックから[コンポーネントを追加]または[command+Shift+C]で、「ya-hira」のグリフを検索して選択します。 このままでは拗促音で使うにはサイズが大きすぎるので、サイズ比を調整します。この書体の場合は、縦横比をそれぞれ77%に変形しています。(拗促音の縮小率は、明朝体だと75〜80%が多いです。) 拗促音の場合は、親字をそのまま縮小しただけだと他の文字と比べて細く見えてしまいます。 (下のプレビューで確認すると太さの違いが分かりやすいかと思います。) なのでコンポーネントで配置した後、分解して太くしたりアウトラインの調整が必要です。 拗促音を作成した後に親字を修正すると、再びコピペして縮小して位置を調整して…などの作業がどうしても発生してしまうため、位置やサイズ比が決まったら分解する前に背景レイヤーにコンポーネントのまま複製しておきます。   背景レイヤー 少し話が逸れてしまいますが、私は作業でよく使う機能なので、背景レイヤーについて少し説明しようと思います。 背景レイヤーはメニューの[パス]→[背景レイヤーを編集]または[command+B]で切り替えることができます。 背景レイヤーはこのようにピンクで表示されます。 こちらに描画したアウトラインはフォントの出力時には含まれないので、修正前のバックアップやガイドラインなど、好きなように配置しておけます。もう一度[command+B]を入力すると、通常のレイヤーに戻ります。 縮小したコンポーネントを選択し、メニューの[パス]→[選択内容を背景レイヤーに複製]または[command+J]で背景レイヤーに複製できます。 背景レイヤーはメニューの[表示]→[背景レイヤーを表示]にチェックを入れると薄いグレーで常に表示されます。 これで背景レイヤーには常に、位置やスケールを調整した状態で最新の「や」のコンポーネントが存在することになるので、親字の「や」が修正された時は背景レイヤーから表のレイヤーにコピペすればスケールや位置の調整はする必要がなくなります。   分解後の調整 ここからさらに分解して太さなどの調整をします。 この作業は人によって進め方が違うと思うので、あくまで参考程度にお願いします。 コンポーネントを選択し、右クリックから[分解]を選択し、コンポーネントを解除し、パスの状態に戻します。 メニューの[フィルタ]→[パスをオフセット]で値を指定して太らせます。余分なパスや、折れてしまったパスはその後修正します。 ※この時パスの方向が正しい方向(反時計回り)になっていないとオフセットが逆に作用して細くなってしまうので注意が必要です。パスの方向については第1回の記事の「パスの描画」 をご覧ください。 これで拗促音の「ゃ」が完成しました! 次は縦組み用の拗促音を作成します。   縦組み用グリフの作成 日本語の拗促音は、縦組みと横組みで位置が異なります。なので縦組み用のグリフを別に新しく生成します。 縦組み用のグリフには、グリフ名の末尾に[.vert]と追記します。 [yasmall-hira]を編集している状態で、メニューの[グリフ]→[グリフを複製]を選択して複製を行います。 [yasmall-hira.001]というグリフが生成されるので、名前を変更して[yasmall-hira.vert]としてください。(001→vert) 複製が終わったら、元から配置されていた「ゃ」のアウトラインを消してしまって、グリフの中が空の状態にします。 そしてこの中に元となる[yasmall-hira]のコンポーネントを配置(右クリックから[コンポーネントを追加])したら、縦組み用に適した位置にコンポーネントを移動させます。

Modules

Web Font Loader provides a module system so that any web font provider can contribute code that allows their fonts to be loaded. This makes it possible to use multiple web font providers at the same time. The specifics of each provider currently supported by the library are documented here.

Custom

To load fonts from any external stylesheet, use the module. Here you’ll need to specify the font family names you’re trying to load, and optionally the url of the stylesheet that provides the declarations for those fonts.

You can specify a specific font variation or set of variations to load and watch by appending the variations separated by commas to the family name separated by a colon. Variations are specified using FVD notation.

WebFontConfig = {
  custom: {
    families: 'My Font', 'My Other Font:n4,i4,n7',
    urls: '/fonts.css'
  }
};

In this example, the file might look something like this:

@font-face {
  font-family: 'My Font';
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: normal; /* or 400 */
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: italic;
  font-weight: normal; /* or 400 */
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: bold; /* or 700 */
  src: ...;
}

If your fonts are already included in another stylesheet you can also leave out the array and just specify font family names to start font loading. As long as the names match those that are declared in the array, the proper loading classes will be applied to the html element.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
  WebFont.load({
    custom: {
      families: 'My Font'
    }
  });
</script>

<style type="text/css">
  @font-face {
    font-family:"My Font";
    src:url("assets/fonts/my_font.woff") format("woff");
  }
</style>

The custom module also supports customizing the test strings that are used to determine whether or not a font has loaded. This can be used to load fonts with custom subsets or glyphs in the private use unicode area.

WebFontConfig = {
  custom: {
    families: 'My Font',
    testStrings: {
      'My Font': '\uE003\uE005'
    }
  }
};

Tests strings should be specified on a per font basis and contain at least one character. If not specified the default test string () is used.

Fonts.com

WebFontConfig = {
  monotype: {
    projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    version: 12345, // (optional, flushes the CDN cache)
    loadAllFonts: true //(optional, loads all project fonts)
  }
};

The Fonts.com module has an optional option which acts as a cache-buster, optional loads all project fonts. By default, Fonts.com module loads only fonts used on the page.

WebFontConfig = {
  : {
    families: 'Droid Sans', 'Droid Serif:bold'
  }
};

Sometimes the font you requested doesn’t come in the default weight (e.g. 400) and you need to explicitly request the variation you want for font events to work (e.g. , , etc.):

WebFontConfig = {
  : {
    families: 'Open Sans Condensed:300,700'
  }
};
WebFontConfig = {
  : {
    families: 'Open Sans Condensed:300,700:latin,greek'
  }
};

You can also supply the parameter to perform character subsetting:

WebFontConfig = {
  : {
    families: 'Droid Sans', 'Droid Serif',
    text: 'abcdefghijklmnopqrstuvwxyz!'
  }
};

The subsetting functionality is only available for the Google module.

Typekit

WebFontConfig = {
  typekit: {
    id: 'xxxxxx'
  }
};

FYI: Typekit’s own JavaScript is built using the Web Font Loader library and already provides all of the same font event functionality. If you’re using Typekit, you should use their embed codes directly unless you also need to load web fonts from other providers on the same page.

Browser Support

Every web browser has varying levels of support for fonts linked via . Web Font Loader determines support for web fonts is using the browser’s user agent string. The user agent string may claim to support a web font format when it in fact does not. This is especially noticeable on mobile browsers with a «Desktop» mode, which usually identify as Chrome on Linux. In this case a web font provider may decide to send WOFF fonts to the device because the real desktop Chrome supports it, while the mobile browser does not. The Web Font Loader is not designed to handle these cases and it defaults to believing what’s in the user agent string. Web font providers can build on top of the basic Web Font Loader functionality to handle these special cases individually.

If Web Font Loader determines that the current browser does not support , the event will be triggered.

When loading fonts from multiple providers, each provider may or may not support a given browser. If Web Font Loader determines that the current browser can support , and at least one provider is able to serve fonts, the fonts from that provider will be loaded. When finished, the event will be triggered.

For fonts loaded from supported providers, the event will be triggered. For fonts loaded from a provider that does not support the current browser, the event will be triggered.

For example:

WebFontConfig = {
  providerA: 'Family1',
  providerB: 'Family2'
};

If can serve fonts to a browser, but cannot, The event will be triggered for . The event will be triggered for once it loads, as will the event.

API

typekitLoad( 'my-typekit-id', mySuccessFunction, myErrorFunction );

Basic load

To load a Typekit font kit, you simply call the function passing in the Typekit ID.

AMD environment:
define(  'typekit-load' , function( typekitLoad ) {
	typekitLoad( 'my-typekit-id' );
} );
Browser global:
window.typekitLoad( 'my-typekit-id' );

Load with success callback

The second argument accepts a callback function which will be called when the font kit has successfully downloaded and initialised.

typekitLoad( 'my-typekit-id', function() {
	// Typekit has downloaded and initialised successfully
} );

Load with error callback

The third argument accepts a callback function which will be called when the font set has failed to download, initialise or has timed out.

typekitLoad( 'my-typekit-id', mySuccessFunction, function() {
	// Typekit failed to download or initialise
} );

HTML classes

In order to control and style your page based on the load status of the font kit, specific classes are added onto the page’s tag.

On start:
// When loading starts it adds class of `wf-loading` and
// `wf-firstload` to html tag if first typekit id to be loaded
typekitLoad( 'my-typekit-id', mySuccessFunction, myErrorFunction );
On success:
// On success
mySuccessFunction = function() {
	// Removes `wf-loading` and `wf-firstload` classes
};
On error:
// On error
myErrorFunction = function() {
	// Removes `wf-loading` and `wf-firstload` classes
	// Adds `wf-inactive` class
};

Timeout

After 2 seconds, if a font kit is not loaded the loader will time out and call the error callback. If you would like to customise this time out value you can via the property. Setting this property to will remove the timeout.

typekitLoad.timeout = 3000; // In milliseconds

typekitLoad( 'my-typekit-id', mySuccessFunction, function() {
	// Typekit failed to download, initialise, or timed out
} );

Voice and tone

The tone of the Typekit blog is informal and conversational, while also being clear and concise. Excessive slang or pop culture references are not appropriate, but neither is academic or stuffy language. Be yourself.

Be clear and concise

Articles should be short and need to get to the point quickly. Clearly state what you are going to discuss, and then address it precisely and efficiently.

Put readers first

Our audience includes designers and developers with a range of typographic skills, from beginners to experts; most are knowledgeable of web standards and interested in improving their craft. Articles should address them respectfully, neither dumbing things down nor assuming they are familiar with every possible prior art.

Show your methods

Our readers are interested in how things are done, and better ways to do them. Allow readers a peek at your process; include relevant code where appropriate.

Punctuation and details

In general, we follow the Chicago Manual of Style. Exceptions and additions to Chicago are noted below.

Em and en dashes

Em dashes are used to indicate a break in thought and should be set off with a space on either side — like so. This permits lines to break more evenly on the web. Do not substitute two hyphens for an em dash.

Use an en dash (without spaces) for numbered ranges, such as 12–14.

Ellipses

Ellipses are used within quotations to indicate that some text has been omitted; they can also be used to indicate a pause, but do so sparingly. Often, an em dash will do instead.

Links

Compose link text that clearly indicates what the text is linking to, and keep it brief. Do not link terminal punctuation. Font names should be linked to the relevant page on Typekit (if applicable) or Typedia. Links should never be set to open in a new window.

Configuration

The Web Font Loader configuration is defined by a global variable named , or passed directly to the method. It defines which fonts to load from each web font provider and gives you the option to specify callbacks for certain events. When using the asynchronous approach, you must define the global variable before the code that loads the Web Font Loader (as in the example above).

Events

Web Font Loader provides an event system that developers can hook into. It gives you notifications of the font loading sequence in both CSS and JavaScript.

  • — This event is triggered when all fonts have been requested.
  • — This event is triggered when the fonts have rendered.
  • — This event is triggered when the browser does not support linked fonts or if none of the fonts could be loaded.
  • — This event is triggered once for each font that’s loaded.
  • — This event is triggered once for each font that renders.
  • — This event is triggered if the font can’t be loaded.

CSS events are implemented as classes on the element. The following classes are set on the element:

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

The placeholder will be replaced by a sanitized version of the name of each font family. Spaces and underscores are removed from the name, and all characters are converted to lower case. For example, becomes . The placeholder is a Font Variation Description. Put simply, it’s a shorthand for describing the style and weight of a particular font. Here are a few examples:

/* n4 */
@font-face { font-style: normal; font-weight: normal; }

/* i7 */
@font-face { font-style: italic; font-weight: bold; }

Keep in mind that maps to and maps to . If no style/weight is specified, the default () will be used.

If fonts are loaded multiple times on a single page, the CSS classes continue to update to reflect the current state of the page. The global class is applied whenever fonts are being requested (even if other fonts are already active or inactive). The class is applied only if none of the fonts on the page have rendered. Otherwise, the class is applied (even if some fonts are inactive).

JavaScript events are implemented as callback functions on the configuration object.

WebFontConfig = {
  : function() {},
  active: function() {},
  inactive: function() {},
  fontloading: function(familyName, fvd) {},
  fontactive: function(familyName, fvd) {},
  fontinactive: function(familyName, fvd) {}
};

The , and callbacks are passed the family name and font variation description of the font that concerns the event.

It is possible to disable setting classes on the HTML element by setting the configuration parameter to (defaults to ).

WebFontConfig = {
  classes: false
};

You can also disable font events (callbacks) by setting the parameter to (defaults to ).

WebFontConfig = {
  events: false
};

If both events and classes are disabled, the Web Font Loader does not perform font watching and only acts as a way to insert @font-face rules in the document.

Timeouts

Since the Internet is not 100% reliable, it’s possible that a font will fail to load. The event will be triggered after 5 seconds if the font fails to render. If at least one font successfully renders, the event will be triggered, else the event will be triggered.

You can change the default timeout by using the option on the object.

WebFontConfig = {
  : {
    families: 'Droid Sans'
  },
  timeout: 2000 // Set the timeout to two seconds
};

The timeout value should be in milliseconds, and defaults to 3000 milliseconds (3 seconds) if not supplied.

Iframes

Usually, it’s easiest to include a copy of Web Font Loader in every window where fonts are needed, so that each window manages its own fonts. However, if you need to have a single window manage fonts for multiple same-origin child windows or iframes that are built up using JavaScript, Web Font Loader supports that as well. Just use the optional configuration option and give it a reference to the target window for loading:

WebFontConfig = {
  : {
    families: 'Droid Sans'
  },
  context: frames'my-child'
};

This is an advanced configuration option that isn’t needed for most use cases.

Typekit

Typekit — это сервис, запущенный компанией Small Batch, позже выкупленный компанией Adobe, который по средствам сервиса платной подписки позволяет веб-разработчикам и веб-дизайнерам использовать нестандартные, не зависящие от системы шрифты в интернет-приложениях. Этот сервис использует свойство CSS @font-face и JavaScript.

HTML

<script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

CSS

h1 {
  font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Плюсы 

  • Очень большая библиотека шрифтов.
  • Хорошо поддержан документацией.
  • Поддержка iPad, iPhone/iPod Touch.
  • Можно выбрать, как будет выглядеть Ваша страница до загрузки шрифтов. 

Минусы 

  • Это платный сервис, но у него также есть бесплатная версия.
  • Зависит от JavaScript, добавляет запрос HTTP.
  • Неудобно выбирать русские шрифты, нет возможности увидеть, как они выглядят, до выбора шрифта.

С этим читают