Webフォントを高速に表示するための3つのポイント – ajike developer's blog – UXデザイン会社アジケの開発者ブログ
Webフォント 2018.08.23 ichikawa こんにちは！フロントエンドエンジニアの市川です。 今回はWebフォントについてのお話です。Webフォント＝重いというイメージがあるかもしれませんが、高速で表示させる為のテクニックをご紹介したいと思います。 Webフォントとは？ Webフォントが無かった時代、サイト上の文字はユーザの端末内に収録されているフォントでしか表示することができませんでした。 しかし、Webフォントの登場により、サーバ上に置かれたフォントデータをユーザが読み込むことで、ユーザの環境に左右されることなく、任意のフォントを表示させることができるようになりました。 フォント1つでサイトのイメージもガラッと変わるので、どんな環境でも同じデザインが表示されるのは、ユーザにとっても制作者にとっても嬉しいですよね！ Webフォントのサービスで有名なのは、やはり「Google
【2023年版】NotoSansCJKjpをサブセット化する | techlab / baigie
結論 結論から話します。サブセット化してウェブサイトにフォント適用するまでに以下の流れが必要です。 Google FontsからはCJKjpはダウンロードできないのでこのGitHubから落とす（設置してくださってる方、本当にありがとうございます🙏）第一水準とか人名漢字とか入れたい文字を定義しておくサブセットフォントメーカーでフォントファイル作成WOFFコンバータでwoff版作成CSSで@font-faceの指定 以降、丁寧に説明してきます。時間ない人は必要なところだけ読んでね。 サブセット化とは？ フォントデータから必要な文字データのみに限定して、オリジナルのフォントデータにまとめなおすことをサブセット化といいます。たとえば「國（国の旧字体）」といった文字はなかなか使わないと思うので、この手の文字一式を削ぎ落としてサブセット化することでフォントデータを軽量化でき、ウェブサイトの読み込み高
【Webフォント高速化】使わない文字を除く！サブセット化の方法
Webフォントは使わない文字・書体は読み込まないようにする当然ですが、使わない文字のフォントの読込みはただサイトを重くするだけになってしまいます。 よくある悪い例が、タイトルなどの限られた場所にしかWebフォントを使用しないのに、フォントはすべて読み込んでしまっている、といった場合です。 たとえばページ見出し部分の「SERVICE」といった文字だけ、GoogleWebフォントを使いたいといった場合を例にして見てみましょう。 使うフォントは「Ubuntu」というフォントでbold書体を使いたいとして以下のようにGoogleフォントの読込みを記述しました。 さて何がいけないでしょうか？ 上記は少し極端な例でもありますが、本来の目的で使うフォントは、「Ubuntu」の「bold 700」で、 S・E・R・V・I・Cの大文字6つのみしか使いません。 それに対して上記読込みは、「Ubuntu」フォン
サブセット化で日本語Webフォントの容量を軽量化する方法
Webサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。 こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。 WebサイトにWebフォントを使うことも増えつつあります。 Webフォントを使用するメリット 見栄えが良くなる、デザイン性が高くなるテキスト表示できるためSEO効果がある他サイトと差別化できるどの端末で閲覧しても同じフォントになる自動翻訳に対応できる Webフォントの使い方はこちら Webフォント使用の注意点 Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。 日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示する
日本語Webフォントをサブセット化する方法【ジャギー対応でなめらかに表示】｜名古屋のホームページ制作・Web制作会社｜エーアンドエー｜A&A
こんにちは。 今回は、Webサイトの最適化・高速化に繋がる「フォントのサブセット化」についてご紹介します。 サブセット化する際、なぜかフォントがギザギザ・ジャギジャギしてしまう問題に頭を抱えたので、その対処法もご紹介します。回避方法がなかなか見つけられなかったので、同じように悩まれている方の助けになれば嬉しいです。 サブセット化とは いきなりですが、Webフォント、使ってますか？ Webサイト全体のイメージにも関わってくるのでフォント選びって重要ですよね。 なので、Webフォントは、どの端末・ブラウザでも同じフォントを表示してくれるのでとても助かります！ ただ、Webフォントにはデメリットもあるんです。 それは…重いんです…。 特に日本語のWebフォントは10MB前後にもなるので、読み込みに時間がかかってしまいます。 日本語って、ひらがな・カタカナ・漢字と文字数が多いですもんね。 それなら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
