Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
[最新版] Noto Sans JapaneseをWebフォントとして使う方法
Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。 ※Adobeからは、『源ノ角ゴシック』として提供されている。 プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。 そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。 Google Noto Fonts 今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。 実は面倒くさい、WebフォントでNoto Sans Japanese Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされて
タイポグラフィを活用するための12のツール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーがコンテンツを重視したアプローチの利点を理解するにつれて、タイポグラフィがデザインプロセスで欠かせないものになってきました。 Web上の95％もの情報は文字で書かれています（Oliver Reichenstein氏） しかしタイポグラフィは、その分野に不慣れな人にとって難しいものです。そこで、タイポグラフィのタスクを快適に行えるように、役立つツールリストを用意しました。この記事で取り上げるツールは、適切なタイポグラフィによってより良いデザインを作る助けになるものです。 以下の項目に分けて、ツールを紹介しています。 フォントを選ぶ フォントペアリングとスタイリングを選ぶ フォントに情報の階層を付ける インスピレーションを得る フォントを選ぶ タイポグラフ
WOFFコンバータ
TrueTypeフォント、OpenTypeフォントからWebフォントであるWOFF、WOFF2を作成します。WOFF、WOFF2からフォントに戻すこともできます。 Windows版 Mac版 概要 フォントとWOFF、WOFF2の相互変換を行うソフトです。 WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。 変換元のフォントとしては、TrueTypeフォント（拡張子 .ttf）、OpenTypeフォント（拡張子.otf）、Windowsにおけるフォントにリンクする形式の外字ファイル（拡張子.tte、.ote）を指定できます。 WOFFの作成と同時にEOT（Embedded OpenType）ファイルを作成することもできます。ただし、Windos版で作成したEOTファイルは圧縮されていますが、Mac版では圧縮されていません。 WOFF、WOFF2をTrue
Preload を用いたリソースプリローディングの最適化 | blog.jxck.io
Intro Preload を指定する <link rel=preload> の仕様が公開されており、現在 Chrome Canary に実装されている。 この仕様のモチベーションについて、 Chrome 開発者の Yoav Weiss 氏のブログも公開された。 今回は、この仕様の特徴と用途を解説し、本サイトへの適用について検討する。 W3C Preload Spec Intent to Ship: <link rel=preload> Preload: What Is It Good For? Preload Preload はリソースのローディングを最適化することを目的に策定された仕様である。 link 属性ファミリーで、最適化に用いられる値としては、以前書いた Resource Hints 系 と近いが、仕様としては別になっている。 また、既に HTTP2 においてこの仕様の一部が使
resouce hintsとpreloadを使ってリソースの取得を最適化する | 69log
Resource HintsとPreloadを使うことでリソースの取得を最適化できるようなので試してみた。 もともとはHTTP2にしてServer Pushを使うことで、予めリソースをサーバー側から送ることができるが、 ブラウザのキャッシュのメリットを活用できないんじゃないかということが気になっていた。 また、単純にHTTP2対応してもウェブページにはcrossoriginなリソースを多く利用しているので、 そのパフォーマンスの問題は解決しないのではないかという疑問があった。 それらを解決する手段としてResource Hintsなどを使ったPrebrowsingの技術が活用できそう。 preloadに関してはPreload: What Is It Good For?がまとまっているので参考にした。 Resource Hints についてResource Hints はlink要素に dn
WEBフォント。Google Font API を使ってみた | サンクユーWEB制作ブログ
遅ればせながら、Google Font API を使ってみました。 Browse Fonts 昨年の5月にリリースされて以降、色々なサイトで利用されているのを目にするようになりました。(主に海外サイト) 通常、Webページ上で表示されるフォントは、クライアント環境によって大きく異なりますが、これをどの環境(より多くの環境)でも同じフォントを表示できるようにしよう! というのがこのAPIです。 これまで、画像で表現していたおしゃれなフォントを、文字データとして表示することができるので、SEO的にもよさそうですね。 さて、使い方ですが、シンプルな2ステップ。 1. HTMLヘッダにて、利用するフォントのCSSを指定 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Font+
CSS Font Loading Module Level 3を試してみた - console.blog(self);
1年以上前から、ちゃんと調べたいと思っていたけど、やっていなかった。 CSS Font Loading Module Level 3は、2014/06/30時点で最終草案(Last Call Working Draft) になっている。CSS Font Loading Module Level 3はフォントのローディングに関する仕様書。 CSS Font Loading Module Level 3 - W3C Last Call Working Draft, 22 May 2014 最新のEditor's Draftはこっち。 CSS Font Loading Module Level 3 - Editor’s Draft フォントについての仕様書はCSS Font Module Level 3で、2014/06/30時点で勧告候補(Candidate Recommendation)にな
Web フォントの表示の最適化 〜 Font Loading API 〜 – rilakkuma3xjapan's blog
1. Overview Web フォントはその性質上, ブラウザがテキストの表示に必要なフォントを知ることができるのは他のリソースと比較するとずっと後になります. @font-face が含まれた CSS をロード スタイルとドキュメントを結合した視覚部分を表現するツリーの構築 テキストとフォントの関係が示された時に, 必要なフォントを確定する といった, フローとなっているからです. これが引き起こす問題として, FOUT (Flash of Unstyled Text) / FOIT (Flash of Invisible Text) があります. FOUT リクエストしたフォントがロードされるまでの間, いくつかのブラウザではタイムアウトするまでの時間が設定されています. タイムアウトまでの間にロードが完了しなかった場合は, 代替フォントが表示され, 代替フォントから指定フォントへの
webfontloaderでWebフォントの読み込みを行う
JavaScriptのライブラリ「webfontloader」で、Webフォント読み込み時のコントロールを追加してみます。 webfontloaderを使用しない場合 まずは普通にWebフォントを設定してみます。 HTML <p class="genshinGothic">源真ゴシック</p> CSS @font-face { font-family: 'GenShinGothic'; src: url('GenShinGothic-Regular.eot'); src: url('GenShinGothic-Regular.eot?#iefix') format('embedded-opentype'), url("GenShinGothic-Regular.woff") format('woff'), url('GenShinGothic-Regular.ttf') format('t
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
日本語フォントのOpenType機能を維持するサブセット化 - Qiita
結論: pyftsubset --layout-features='*' を使え 経緯 はじめ、Noto Sans CJK JPをWebフォントとして使うためにサブセット化したくていろいろやってたのですが、全然うまく行きませんでした。というのも、CSSでfont-feature-settings: 'palt';したいのに、武蔵システムのサブセットフォントメーカーはOpenType機能を削除してしまいますし、かといってFont Squirre Webfont Generatorを初めとするサブセット化Webサービスには、そもそもフォントサイズが大きすぎてだめって言われるか、502 Bad Gatewayか、無かったことにされるかします。 フォントサイズ？ そういえばNoto Sans CJK JPと同じグリフでできているAdobe Source Han Sans JPは、たしか前者よりサイ
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作る - Qiita
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作るfontNotoSansfonttoolsNotoSerif はじめに 2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK（源ノ明朝）」が発表されました。 さっそくサイトでも使いたいところですが、そのままでは1ウェイトあたり約23MBもあるのでユーザーにかなりの負担を強いてしまいます。そこでサブセットを作ることにしました。 ここで言う「サブセット」とは必要な文字だけを抜き出したフォントファイルのことです。 サブセットフォントメーカーは使わない 以前は武蔵システムさんの「サブセットフォントメーカー」という大変素晴らしいツールを使っていましたが、OpenTypeFontの情報をごっそり削ってしまいます。そのため CSS の
Webフォントのロードをやめた - 1000ch.net
2016.08.22Webフォントのロードをやめたこのサイトではフォントに Roboto と Roboto Mono を適用している。以前までは Google Fonts で配信されているそれぞれのフォントをロードしていたが、それをやめて font-family の指定のみに変更した。 プログレッシブな適用とOS共通フォントの選択まず前提として、テキストのベースフォントとして明朝（serif）を、 <h1> ~ <h6> の見出しにはゴシック（sans-serif）を、コードには等幅（monospace）を適用する前提方針がある。明朝・ゴシック・等幅の中から自分の好みに近く、尚且つ Mac と Windows にインストールされているものを優先的に選ぶようにした。 body { font-family: YuMincho, serif; font-weight: normal; } h1,
ナウでヤングな CSS Font Loading - Qiita
Web フォントがレンダリングされるタイミングを得ようとすると、そのやんちゃな挙動を制御するため人類は今まで下記のような対策をしてきた。 Web FontsをHTML Canvasで使う canvas要素にwebフォントを確実に描画する方法 typekit/webfontloader 無知な僕は同様の事象にハマり、一通り調べた後、下記の答えにたどり着いた。 canvas に WebFont を指定するとき、一回どこかの DOM で使う WebFont をレンダリングしておかないと死に至る現象を発見したので皆様もお気を付けください — ダメレオン (@damele0n) April 10, 2014 要するに DOM もしくは canvas 上で、そのフォントが指定されていて一度そのフォントがレンダリングされてからでないと canvas 上はレンダリングされない、ということだ。 (ちなみに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフォントとは 使い方や「読み込みが重い？遅い？」に回答 | インタビュー
Font support on Internet Explorer, WOFF v.s. WOFF 2.0
プレゼン
ウェブフォントをブラウザにプリインストールするスキームがあれば超高速化できそう
[JS]レスポンシブ対応！テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty![[JS]レスポンシブ対応！テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty](https://cdn-ak-scissors.b.st-hatena.com/image/square/61cdba9fb6ae55e3307779bb6eb2558db2c4b611/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017073101-01.png)
