I studied the fonts of the top 1000 websites. Here's what I learned.
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce
Time to Say Goodbye to Google Fonts: Cache Performance
I’ve used Google Fonts in prototypes and in 10M+ MAU products. It’s incredibly easy to get started with and provides an amazing font discovery. That’s also why it’s currently still used on over 42M websites! This convenience has its price: Performance. Many have already pointed out the cost of multiple requests. If you want the remaining speed boost, then you’re best off downloading your used Goog
ブラウザからローカルフォントにアクセスする：Font Enumeration API と Font Table Access API - しろもじメモランダム
最近の Web アプリはどんどんリッチになっていっていますが、ネイティブアプリとは違って、「ローカルフォント*1を列挙してユーザーに選択させ、それを表示に使う」といったことは仕様上不可能です。 例えば、画像に文字を入れる Web アプリを考えてみます。文字の描画自体は canvas の ctx.fillText() が使えますが、問題はフォントの指定です。ctx.font にローカルフォントを指定するためには、そのローカルフォントのフォント名を知っている必要があります。OS にプリインストールされているフォントでなどであれば、「Web アプリ側であらかじめフォント名のリストを用意しておき、実際にインストールされているかどうかをチェック*2してからユーザーに選択させる」という手段がとれますが、「自分でインストールしたこのフォントが使いたい！」という要求に応えるのは現実的ではありません。 提案
Noto Sans Hinted と font-feature-settings: 'palt' | blog.jxck.io
Intro Noto Sans のサブセット生成を見なおし、 Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。 作業と検証の記録を兼ねて、実施結果を記す。 fonttools これまで、フォントのサブセットの生成には以下の 2 つのツールを使用していた。 サブセットフォントメーカー WOFF コンバータ しかし、 macOS を Catalina にあげたところ、これらが起動できなくなり、フォントが生成できなくなった。 これまで GUI で行なっていたが、せっかくなので自動化するために、代替コマンドを探し、プロセスを組んだ。 いくつかツールがあるが、今回は fonttools に同梱された pyftsubset を採用することとした。 fonttools/fonttools pyftsubset こ
デザイナーなら知っておかないと損するGoogleWebフォント特選10個 | Find Job ! Startup
現在、欧文を中心に600以上の書体が選べるGoogleWebフォント。これだけ数が多いと、どれを選べばいいのか日本人の私たちにはよく分かりません。 今回は、全世界で最も使われている人気のGoogleWebフォントを10個厳選してお届けします。海外向けのサイトを作る際にはハズせない、日本向けサイトを作る際にもアクセントとして使いたい、とっておきのGoogleWebフォントを集めました。 GoogleWebフォントを使うメリット GoogleWebフォントを使うと、こんなにもたくさんのメリットがあります。 SEO対策になる 修正が簡単に行える 選択してコピペできる 拡大縮小・高解像度画面（Retina Displayなど）でもボケない 使わない手はありません。 GoogleWebフォントの使い方 使い方に関しては、OZPAさんのブログが詳しいです。参考にしましょう。 今さらながらWe
v6.13
ちょっと色々手を入れたのでエントリにする。手を入れたというか一度全部Webフォントでやってみたいなーと思ったので、そうしてみた話。まぁ日本語は無理なのでそんなにだけど。 本文フォント 今はフォントサイズをごく一部でしか指定していないのでx-heightにはあまりこだわらなかった。16pxでがたつかず、Boldがあるという条件で選別した結果、 CarthoGothic Std DejaWeb Fontin Sans Lato Open Sans PT Sans あたりが候補に残った。Fontin Sansはさすがに派手すぎるかなーという理由で、PT Sansは小文字のlの曲がりがきつすぎる気がするという理由でそれぞれ外した。残りのどれでも良かったんだけどあんまり使われていない気がするLatoにした……がSafariで文字が一部ぶっ壊れるのでとりあえずOpen Sansに……。DejaWebに
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icons | Font Awesome