タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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という
追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。 ↓ 詳細 これより下の解説は古い内容になります。実装の参考にしないようお願いします。 以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 :::message alertz Next.js v10.0.4でのドキュメントに則っていない記録になります。 ::: Font Opt
Webフォントの表示を最適化するテクニック
Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ
Web フォントを使って contenteditable から脱出する - LINE ENGINEERING
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい
WordPress Tavernは6月20日(米国時間)、「WordPress.org Strongly Urges Theme Authors to Switch to Locally Hosted Webfonts – WP Tavern」において、WordPress.orgのテーマチームがWebフォントの使用を停止し、ローカルでホストされているWebフォントを使用するようにテーマを更新することを強く推奨していると伝えた。 WebフォントはEU一般データ保護規則(GDPR: General Data Protection Regulation)に抵触するリスクがあるとして、今後はリモートでホストされているWebフォントの使用そのものを禁止する可能性もあると指摘されている。 WordPress.org Strongly Urges Theme Authors to Switch to L
表題のことについて検証してみましょう。 目次 目次 前提 Webページ上で独自のフォントを読み込むには フォントファイルのサイズ フォントファイルのサイズを抑える工夫 フォントファイルを分割し、必要に応じて読み込む フォントファイルを圧縮する 前提おわり 本題 規格によると 4.5. Character range: the unicode-range descriptor 4.5.1. Using character ranges to define composite fonts 実験する 準備 実験方法 実験結果 まとめ 前提 本題に入る前に、Webフォントを配信する際の前提について説明します。分かっている方は読み飛ばしてもらって大丈夫です。 Webページ上で独自のフォントを読み込むには CSSの font-family 属性に使いたいフォント名を書くことで、Webページ上のコンテン
はじめに Webフォントは無償のものもあり、気軽に利用できる環境になっています。中でもGoogle Fontsを利用している人も多いのではないでしょうか。私もよく使わせてもらっています。 今年、 コーディングしたものの、デザインと見比べると、boldの太さが異なるといったという事があり、Webフォントを使う時の注意点の1つを残しておこうと思います。 以下では Google Fonts の M PLUS 1p を利用する想定の例を挙げながら説明します。（キャプチャはMacのChrome 78.0.3904.108（Official Build） （64 ビット）で表示したものになります） import時に単一のfont-familyで利用する時の問題 Google Fontsのページを参照して、 M PLUS 1p を利用して選択すると、 @import 'https://fonts.goo
「Noto Sans」とは GoogleがAdobeと共同開発したフォントファミリー。 webフォントで日本語が使えるメリットは大きいので積極的に使っていきたいところです。 しかし、「Noto Sans」はとにかく種類が多い… ほぼ同じ内容なのにGoogleとAdobeで名称が異なり、さらにその中でも似たようなフォント名で分かれているので非常にややこしいです。 結局どれを使えば良いのか。 今回はwebフォントとして使用をする前提でそれぞれの違いと用途による使い分けを検証してみたいと思います。 どれだけの種類があるのか ざっくり「Noto Sans」=「Source Han Sans」=「源の角ゴシック」ではあるのですが、Google側ではNoto Sans、Adobe側では源ノ角ゴシック（Source Han Sans）という名称でリリースされています。 さらに細かく分けると以下のようにな
@spring_rainingが、フォントワークス株式会社の@terkelにフォントメーカーのWebに対する取り組みや日本語Webフォントの未来について聞きました。 Guest 鈴木丈さん @terkel フォントワークス株式会社 Web開発者 https://terkel.jp フォントメーカーにおけるWeb開発者の役割 Webが担う領域は広がり続けている コーポレートサイト Webベースのフォント提供システム 膨大な種類のフォントを扱う難しさ Webフォントへの挑戦 FONTPLUS https://fontplus.jp/ Webでフォントが利用できるようになる「Webフォント」のためのプラットフォーム フォントメーカーならではの取り組み 「混植」への対応 https://fontplus.jp/info/5201 日本語Webフォントの配信の難しさ 日本語Webフォントの普及 CJ
コア ウェブ バイタル対策のWebフォント徹底攻略！ これでダメならあきらめろ【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
Webフォントによるコア ウェブ バイタル（CWV）の悪化を抑えるためにできることを、UXにも明るいエンジニアが徹底的に解説。LCPもCLSも下げずにWebフォントを使うには？ ほかにも、CWV改善もう1つの事例、Search Consoleの改善と変な仕様、GMB投稿のベストプラクティスなどなどなど、SEOとサイト運営に役立つ情報を、今回もまとめてお届けする。 コア ウェブ バイタルの不良ページがゼロまで減少！ GYAO!はどのようにして表示パフォーマンスを改善したのか？グーグル、Search Consoleのカバレッジレポートを改良data-vocabulary.orgのサポートをグーグルが完全終了、Search Consoleで確認を2021年最初のオフィスアワー: コア ウェブ バイタルやサイトマップの質問などGMBの投稿機能のベストプラクティスをコンテンツマーケのプロが解説削除し
Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP
《2020年6月24日 21:00 公開/更新》 日本語Webフォントでシャギーが出るのを防ぐ簡単なCSS [テキスト] 日本語Webフォントを使用してテキストを掲載した際に、ブラウザによってはシャギー（文字のギザギザ）が目立ってしまうことがあります。そのようなシャギーを防ぐには、CSSでほんの少しだけ文字を傾ける方法が有効です。ほんの少しの角度なら見た目には傾きは全く分かりません。しかし、フォントのシャギーは取れるため、文字は読みやすく綺麗に表示できます。 Windows環境で日本語Webフォントを使って小さな文字を表示するとシャギーが目立つことがある シャギーを防ぐ簡単なCSSは1行で済む 0.03度の傾きなら、まず見た目には分からない シャギーが取れる角度（小さくし過ぎないよう注意） ただし、ページ全体に適用するとマズい場合があるので注意 理由1. 横スクロールバーが出てしまう 理由
【はてなブログ】ブログアイコン、Webフォント一覧（124種類）使い方、表示されない時の対処法 - バンビの初心者ブログ教室
はてなブログで標準で使えるアイコンフォント（Webフォント）とその使い方を紹介します。 ↓↓これぜんぶ！ダウンロードしなくても使えます！！ グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。 ポイントを目立たせたい時 ↓↓ ポイント スマホのボトムメニュー ↓↓（ボトムメニューのCSSはこちら） SNSのシェアボタンなどをつくるのにも使えます！ この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。 アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。 これらのフォントであれば、外部から読み込むよりページが
Webフォントは使わない文字・書体は読み込まないようにする当然ですが、使わない文字のフォントの読込みはただサイトを重くするだけになってしまいます。 よくある悪い例が、タイトルなどの限られた場所にしかWebフォントを使用しないのに、フォントはすべて読み込んでしまっている、といった場合です。 たとえばページ見出し部分の「SERVICE」といった文字だけ、GoogleWebフォントを使いたいといった場合を例にして見てみましょう。 使うフォントは「Ubuntu」というフォントでbold書体を使いたいとして以下のようにGoogleフォントの読込みを記述しました。 さて何がいけないでしょうか？ 上記は少し極端な例でもありますが、本来の目的で使うフォントは、「Ubuntu」の「bold 700」で、 S・E・R・V・I・Cの大文字6つのみしか使いません。 それに対して上記読込みは、「Ubuntu」フォン
約物Webフォント「約味」（YakuAdj） – ものかの
Webフォント「約味」（YakuAdj）を公開します。和文の句読点や括弧が連続したときのアキを自動調整するフォントです。 https://github.com/monokano/Fonts 以前、「約猫」（YakuCalt）というWebフォントを公開しました。これも約物が連続したときのアキを自動調整するフォントです。GSUBのcaltを使って実現しています。 今回公開する「約味」は、まったく同じ自動調整をするのですが、異なるのはGPOSのchwsとvchwを使って実現していることです。 Contextual Spacing GPOS Features—Redux 約味（YakuAdj）の良いところ グリフの数が約猫の半分なので、フォントファイルのサイズがより軽い。 フィーチャーコードがcaltより分かりやすい。 約猫（YakuCalt）の良いところ Webブラウザ上のテキスト選択箇所がズレ
Webフォントとは？メリット・デメリット・使い方など 完全ガイド初級編【まとめ】 更新日：2020/06/11 最近、ブランディングのためにWebフォントを使用しているサイトを多く見かけますよね。 そんな中、「Webフォントってよく分からない…」「Webフォントって重いんじゃないの…？」「使いたいフォントがWebフォントにない…」と思っている方は多いのではないでしょうか？ この記事では「Webフォントとは」から使い方、軽量化の方法まで徹底解説していきます。 おすすめの無料Webフォントサービスもご紹介しておりますので、ぜひ最後まで読んでいってくださいね！ 目次デバイスフォントとWebフォントとはデバイスフォントで使用するフォントとはWebフォントのメリットデメリット日本語Webフォント使用の注意点日本語Webフォントを軽量化する方法cssでWebフォントを指定する@font-faceの書き
日本語Webフォント( M PLUS 1p)がつぶれる＆ジャギる問題を解決する | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、miyabiです。 日本語のWebフォントを使用している時、文字につぶれやジャギが発生することがあります。今回はそんな日本語Webフォントをキレイ(滑らか)に表示する方法をご紹介します。 日本語Webフォントがつぶれる、ジャギる 主にWindows環境だったり、18px以下の小さいフォントサイズを使用している際に発生することがあります。特にGoogleフォントが提供している日本語M PLUS 1pは、丸みがありポップな印象を持たせられるのでエンタメ系のサイトで使用頻度が高いのですが、何もしないとWindowsで下記のようになってしまいます。 フォントのつぶれやジャギが目立ち、読みづらい状態です。これを改善するにはどのように対処すれば良いのでしょうか。 日本語Webフォントをキレイ(滑らか)に表示する 方法は至って簡単です。 テキストに次のCSSを追加するだけでキレイ(滑らか)に
Posted by NAGAYA on Jul 25th, 2019 Webページ上のテキスト表示に使うフォントは、基本的にPCにデフォルトで入っているもの（たとえばWindowsの和文フォントならメイリオや游ゴシック）のみが使われてきました。 デザイン性の高いフォントを使いたい場合は画像化して使っていましたが、最近ではあらゆるデバイスで綺麗に表示させること、検索エンジンの進歩にともないSEOを意識することを求められるようになった影響もあり文字情報はテキストで表現するのがベターとなっています。 これらに関連して活用されているのが Webフォント です。 ページ表示時にWebサーバ上にあるフォントデータも一緒に読み込んでくるので、誰が見ても同じフォントでテキストを表示することができます。 Webフォント利用のための事前知識 Webフォントを使う手段 Webフォントを使う手段は大きく次の2つで
FONTPLUSをご利用頂いているお客様、これからご利用を検討されているお客様に重要なお知らせです。 このたび、株式会社モリサワの57書体に関してFONTPLUSでの取り扱いを終了させていただきます。 お客様のお申し込み時期、更新・追加の時期により、取り扱い終了日程が異なりますので、下記内容をご確認ください。 株式会社モリサワの対象書体はこちら 現在FONTPLUSをご契約中のお客様 2020年9月1日（火）15時以前に、ご契約いただいたライセンスを更新された場合、1年後の2021年9月1日（水）15時までモリサワの対象書体をご利用いただけます。 2021年9月1日（水）15時以降は、有効ライセンスのPVが残っていてもご利用いただけなくなりますのでご注意ください。2021年9月1日（水）15時までに、他の提供書体に差し替えていただくなどのご対応をお願いいたします。 また、追加のお申込みが2
WebデザインでWebフォントを利用してデザインを構築していくことがよくあります。 そこで使えるのがCSSの@font-face規則です。 @font-face規則はWebフォントを利用するために用意された規則です。Webフォントで有名なのがGoogle Fontsではないでしょうか。 他にもたくさん提供されているフォントや自作のフォントなどのデータを、CSSで読み込んで利用することができます。 Webサイトのデザインでこだわりのあるフォントを利用すると、PhotoshopやIllustrator等で作成したデザインカンプから、Webで表現できない場合があるので、こだわりのあるフォントの部分だけ画像で書き出すしかありません。 もちろん画像として扱っていくのは問題ないのですが、レスポンシブWebデザインに対応しようとすると、画像よりもできるだけHTMLのマークアップとCSSで表現したいところ
日本語Webフォントをサブセット化する方法【ジャギー対応でなめらかに表示】｜名古屋のホームページ制作・Web制作会社｜エーアンドエー｜A&A
こんにちは。 今回は、Webサイトの最適化・高速化に繋がる「フォントのサブセット化」についてご紹介します。 サブセット化する際、なぜかフォントがギザギザ・ジャギジャギしてしまう問題に頭を抱えたので、その対処法もご紹介します。回避方法がなかなか見つけられなかったので、同じように悩まれている方の助けになれば嬉しいです。 サブセット化とは いきなりですが、Webフォント、使ってますか？ Webサイト全体のイメージにも関わってくるのでフォント選びって重要ですよね。 なので、Webフォントは、どの端末・ブラウザでも同じフォントを表示してくれるのでとても助かります！ ただ、Webフォントにはデメリットもあるんです。 それは…重いんです…。 特に日本語のWebフォントは10MB前後にもなるので、読み込みに時間がかかってしまいます。 日本語って、ひらがな・カタカナ・漢字と文字数が多いですもんね。 それなら
サブセット化で日本語Webフォントの容量を軽量化する方法
Webサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。 こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。 WebサイトにWebフォントを使うことも増えつつあります。 Webフォントを使用するメリット 見栄えが良くなる、デザイン性が高くなるテキスト表示できるためSEO効果がある他サイトと差別化できるどの端末で閲覧しても同じフォントになる自動翻訳に対応できる Webフォントの使い方はこちら Webフォント使用の注意点 Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。 日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示する
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの19日目の記事です。 端末を問わずテキストをリッチに表現することのできるWebフォントは、昨今のWebサイト構築において欠かせない技術の1つです。 CSS3から策定され、フォントファイルをサーバーにアップロード、または提供されているフォントファイルから読み込みを行うことで実装できますが、日本語Webフォントの普及は欧文Webフォントに比べ浸透していくまでにタイムラグがありました。 日本語Webフォントの課題 日本語Webフォントが浸透するまでに時間がかかっている理由として、オープンソースで使用できるフォント自体の数が少ないことや、欧文フォントに比べて収録文字数が多く、ファイルサイズが大きいことなどが挙げられます。 ファイルサイズについては、フォントのウェイトパターンをすべて含めてしまうと、大きく膨れ上がることになります
WEBフォントをサブセット化して使用する際に参考になるかもしれない文字列一覧です。 Noto sansの軽量化の際などに。 以下、詳細です。 【2018/06/20】 一部更新しました。 【2018/07/11】 JIS第2水準の一覧を追加しました。 JIS第1水準漢字（2965字） 亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨
無料で使える日本語webフォント 無料で使える日本語webフォントも増えてきたので、一覧にしてみました。 Googleフォント M PLUS 1p / M PLUS Rounded 1c / さわらび明朝（Sawarabi Mincho） / さわらびゴシック（Sawarabi Gothic） / Noto Sans JP / Noto Sans TC / Noto Sans SC / Noto Serif JP / Noto Serif SC / Noto Serif TC / 小杉フォント（Kosugi） / 小杉丸フォント（Kosugi Maru） / はんなり明朝（Hannari） / こころ明朝（Kokoro） / ニコモジ（Nico Moji） / ニクキュウ（Nikukyu） Google Fonts + 日本語（公式サイト） ※小杉フォントと小杉丸フォントはGoogle F
そのWebフォントの数字、等幅？数字のタイプ別オススメ20選 | 制作のこと | ブログ | 徳島のホームページ制作会社 | 有限会社データプロ
Webフォントを選ぶとき、数字の形って気にしてますか？ 数字の高さや幅が揃っていないと、年表や価格表の表示がズレて読みにくくなります。 また、数字の高さが異なる特徴的なフォントを使うことで、数字をアクセントにすることもできます。 今回は使い勝手のよいWebフォントを選ぶためのポイントと、 GoogleFontsで特に人気のフォントから、数字のタイプ別でオススメをご紹介します。 Webフォントの選び方 見出しだけか、本文にも使うのか 見出しだけならスクリプト書体(筆記体)や装飾フォントも視野に入れることができます。 対して本文テキストにも混ぜて使うなら、和文の書体に合わせてサンセリフかセリフを選ぶのが無難です。 GoogleFontsの中でも特に人気があるサンセリフ体のRalewayは「W」の形が印象的。 ブログなどで和欧混植されているのをよく見かけます。 ※和欧混植とは、英字と日本語でフォ
Adobe Fonts のWEBフォントを使う際の注意点／他のWEBフォント配信サービスとの比較 | ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン
ウェブFRIDAY 2020 / 2 / 21 Adobe Fonts のWEBフォントを使う際の注意点／他のWEBフォント配信サービスとの比較 Adobe Creative Cloud のライセンスに含まれる Adobe Fonts（旧Adobe Typekit）では各種フォントが使い放題な上、WEBフォントも利用可能です。 WEBフォントを使えば、指定フォントがインストールされていないパソコンでも全く同じ表示ができます。アクセス数による制限もありませんのでかなり自由に使えますが、注意点もあります。 WEBフォント使用時の注意 注意すべきなのはWEBフォントでの使用は再販不可という点です。 なので、例えば弊社が自社サイトでWEBフォントを使う分には問題ありませんが、 弊社が受託して制作したウェブサイトでWEBフォントを利用するのはライセンス違反となります。 参考：フォントのライセンスのF
【はてなブログカスタマイズ】ブログのフォントを変更！無料Webフォントを使おう♪（Adobe Fonts） - 【ちゃんこめBlog】インド在住OLの雑記ブログ
こんにちは、Kome（@chankomeppy）です。 ブログデザインのマイナーチェンジをしたので記録を残しておきます！ 当ブログではどの端末からでも文字のフォントが同じように見えるようにWebフォントを使用しています。今回はじめてAdobe Fontsを使用しましたので、そのまとめです。 ▼目次はこちら （クリックして表示） 無料Webフォント Google Fonts Adobe Fonts Adobe Fontsの追加方法 注意事項 さいごに 無料Webフォント Webフォントとは、インターネット上で配布されているフォントを呼び出して使用する技術です。 昔は、サイト作成者がフォントを指定し、ユーザーの閲覧端末がそのフォントに対応していないと別のフォントで表示されてしまうということが起きていました。サイト作成者が表示させたいフォントが表示できないことがあったんですね～。 Webフォント
セルフホスティングの場合、フォントの読み込みには @font-face を使います。そのプロパティである unicode-range を使うことで、フォントの使用する文字範囲を指定できるため、複数書体の混植ができます。 ただし、 unicode-range には、フォントデータをサブセットする機能はなく、表示している文字以外のフォントデータも全てダウンロードされることに注意してください。詳しい仕様は以下のリソースを参照してください。
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい
【Webフォント】Google Fonts にある丸ゴシック系の書体についてまとめてみた！ | 株式会社アルタのごった煮ブログ
マークアップエンジニアのアシュリーです！ 最近Google Fontsの日本語対応フォントが増えすぎて、どんなフォントがあったか全然覚えられません！ とりあえず今回は、丸ゴシック系の書体についてまとめてご紹介したいと思います！ 今回ご紹介するフォントは 「キウイ丸」「Rounded M+」「小杉丸ゴシック(モトヤマルベリ)」 キウイ丸 (Kiwi Maru)マメロンというフォントをベースにして作成された丸みのあるフォントです。 この記事では丸ゴシック系としてご紹介していますが、手書き風と丸ゴシックの間くらいの形をしています。 参考：https://github.com/Kiwi-KawagotoKajiru/Kiwi-Maru Google Fontsにある日本語丸ゴシック体の中では、比較的仮名の仮想ボディが小さめなので、文字の形がやや個性的であることに目をつぶれば、モリサワの秀英丸ゴシッ
池田 泰延 on Twitter: "「Webフォントが重たい」ことへの対策。 ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf"
「Webフォントが重たい」ことへの対策。 ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf
エンジニアが歓喜するラインナップ！！1,500以上の無料アイコンが使えるWebフォント「CoreUI Icons」 CoreUI Icons https://coreui.io/icons/free/ CoreUI Iconsの特徴 「CoreUI Icons」は、1,500以上の無料アイコンが使えるWebフォントです。 いわゆるFont Awesomeの代替サービスですが、エンジニアが思わず、おぉぉ...とうなるラインナップを誇っています。 Gnuのシンボルでもあるヌー エンジニア以外は、おそらく全くの無名でもあろうジェンキンスのおじさん そしてKubernetesと、他にどんなアイコンがあるか探してみるだけでも面白いです。 CoreUI Icons https://coreui.io/icons/free/
いろんな意味での良いWebフォント表示方法 オリジナルページはこちら 弊社サイトでは3種類のWebフォント(font-weight的には8タイプ)を使用しております。 【'Noto+Sans+JP:400,700', 'Noto+Sans:400,700', 'Raleway:200,400,500,700'】 全てライセンスフリーの Google Fonts です。 Googleさん！ありがとう！！ ひじょうに助かります。お世話になっております。足を向けて寝られません！ その Google のエラい人が、来年あたりに検索結果に反映させると明言している Web Vitals ※1 対策と、画面表示の際に 一瞬チラつく ※2 問題を解消するためには、Webフォントをどのように実装するのがベストなのかを検証してみました。 優先順位はありませんがイイ感じに折り合いが付くように、検証と調整を行う前
Webフォントの魅力・活用事例・仕組みを語るイベント「アナタの知らないWebフォントの世界 in Osaka」を開催 | ニュース&プレスリリース | 企業情報
株式会社モリサワとさくらインターネット株式会社（代表取締役社長：田中邦裕、本社：大阪府大阪市、以下さくらインターネット）は、Webフォントの魅力・活用事例・仕組みを語るイベント「アナタの知らないWebフォントの世界 in Osaka」を、2019年9月12日（木）に開催します。 モリサワは、さくらインターネットが運営する「さくらのレンタルサーバ」にて、Webフォントサービス「TypeSquare」の30書体を追加料金なしにご利用いただける機能を、2016年6月より提供開始。その後機能拡張を実施し、多くのお客様にご利用いただいています。 今回、Webフォントの魅力をたくさんの方々に知っていただきたく、開催の運びとなりました。あまり知られていない「フォントの成り立ち」や「どのようにフォントが制作されているか」、「Webフォントの仕組み」などを解説します。Webフォントや文字の専門家の話を聞くこ
【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか 更新日：2020/01/17 Adobe Creative Cloud（以下 Adobe CC）に契約しているユーザーが利用可能なサービスに、Adobe Fonts(旧名 typekit)というものがあります。 追加料金なく、全フォントを商用・個人用問わず利用可能となっております。 Futuraなど有名な欧文フォントだけでなく、モリサワやフォントワークスの日本語フォント等も多く提供されており、 常用漢字・各種フォントウェイトに対応しているものが多く、デザイン面で重宝します。 筑紫A丸ゴシックにはよくお世話になっています！ そしてなんと、これらのフォントはwebフォントとして使用することが出来ます。 使用にあたり、埋め込むwebサイトのPV数制限もないため非常に有用なサービスに
【はてなブログカスタマイズ】WEBフォントをユニバーサルデザインフォントに変えました。 - TOMOKO OOSUKI
特に記事内容とは関係ない、アサイーのイラストです WEBフォントをユニバーサルデザインフォントに変えました。 「みんなの文字」というものです。 なんと無料のユニバーサルデザインWEBフォントが存在するとは… これで、見やすく、目に優しくなったと思います。 ↓これを使いました。 minmoji.ucda.jp これは無料であるかわりに、サイトのどこかに「認定シール」をいれないといけない という決まりです。 私はダッシュボード→デザイン→カスタマイズ（スパナのボタン） →サイドバー→「モジュールを追加」でHTMLを選択 →メールで送られてきたタグを設置 しました。サイドバーの一番下に「認定シール」が見えるかと思います。 ↓ユニバーサルデザインフォントとは tsutawarudesign.com ついでに本文の文字の大きさも大きくしたのですが、その方法はまた後日。 他にも、細かいカスタマイズをし
国内初、和欧混植をWebフォントとして利用できる「混植フォント」サービスを開始 | Webフォント・サービス FONTPLUS
国内初、和欧混植をWebフォントとして利用できる「混植フォント」サービスを開始 FONTPLUSは、和文フォントと欧文フォントを組み合わせた「混植フォント」の第1弾として、フォントワークス社とMonotype社のWebフォント（4ファミリー8書体）を2020年10月15日よりご提供開始いたします。混植フォントはWebフォントサービスにおいては、国内初のサービスとなります。 FONTPLUSをご利用中のお客様は、追加費用なしでご利用いただけるサービスとなります。 「和欧混植」をWebデザインにも気軽に取り入れたい 印刷物のデザインでは、欧文フォントの文字サイズやベースライン位置などを調整した上で和文フォントと組み合わせる「和欧混植」という手法が広く使われています。和文フォントに含まれる英数字をそのまま使うよりも、欧文フォントを使う方がより本格的で高品質なタイポグラフィを実現できる場合があるた
極細～極太まで、丸ゴシック日本語Webフォントを7段階の細さ(太さ)で表示する方法 - スタイルシートTipsふぁくとりー
《2020年6月2日 13:48 公開/更新》 極細～極太まで、丸ゴシック日本語Webフォントを7段階の細さ(太さ)で表示する方法 [テキスト] 極細の丸ゴシックWebフォントから、極太の丸ゴシックWebフォントまで、7段階の太さ(細さ)を選んで日本語文字を表示できるとデザインの幅が広がって便利です。丸ゴシック系フォントは閲覧環境によっては存在しない場合もありますが、Webフォントを使えば環境に依存せず表示できて便利です。また、文字を画像化せずに済むのでコピーや修正も簡単ですし、文字の検索もできます。Google Fontsで無償利用できる丸ゴシック系の日本語Webフォント「M PLUS Rounded 1c」を使えば、CSSのfont-weightプロパティで7段階の太さ(細さ)を切り替えて表示できます。 極細から極太まで7段階ある丸ゴシック系の日本語Webフォント「M PLUS Rou
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフォント読み込み戦略（2021年） - MOL
Next.jsのFont Optimizations（Webフォントの最適化）を試してみる
WebフォントはGDPRに抵触？WordPress.orgが書き換えを呼びかけ
Webフォントを分割して読み込む際にunicode-rangeを指定しなかったらどうなるのか - 私が歌川です
Webフォントを使う時はbold時のfont-weightを読み込んだ上で扱う - Qiita
【WEBフォント】Noto Sans系日本語フォントは結局どれを使えばいいのか検証してみる | oku-log
ep.79 「フォントのなかの人」と見る Web フォントの未来 | UIT INSIDE
商用利用可能！高品質なオススメ日本語Webフォント10選（無料フォント多数） - ICS MEDIA
日本語Webフォントでシャギーが出るのを防ぐ簡単なCSS - スタイルシートTipsふぁくとりー
【Webフォント高速化】使わない文字を除く！サブセット化の方法
Webフォントとは？メリット・デメリット・使い方など 完全ガイド初級編【まとめ】 | 東京のホームページ制作 / WEB制作会社 BRISK
Webフォントをサーバにアップロードして使うには？注意点や実装方法まとめ | 株式会社グランフェアズ
モリサワの57書体の取り扱いを終了いたします | Webフォント・サービス FONTPLUS
CSSの@font-faceでGoogle FontsのWebフォントを利用する方法 | Free Style
日本語Webフォントを使用する際のアプローチについて | フロントエンドBlog | ミツエーリンクス
日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB
日本語のwebフォントを使いたい時のメモ｜くろひつじのメモ帳
任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリ・「Font of Web」
Webフォントのデザインテクニック05「混植してみよう」 - Type Project Staff Blog
Web フォントを使って contenteditable から脱出する
エンジニアが歓喜するラインナップ！！1,500以上の無料アイコンが使えるWebフォント「CoreUI Icons」
WebフォントのFOUT問題・Web Vitals対策を検証してみた - Qiita
【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか – 東京のホームページ制作 / WEB制作会社 BRISK
www.47news.jp
dictionary.goo.ne.jp
cocomeister.jp
tendermind.hatenablog.com
coffeecarrot.jp
www.daily.co.jp