これはかなりいい！ Helveticaに似たオープンソースの無料フォント -Overused Grotesk（異世界のHelvetica）

2024/07/01 20 users Helvetica ウエイト キリル文字 可変フォント 多言語

さまざまなデザインに広く使用されているHelveticaのもっとも際だった特徴を模倣した、異世界のHelveticaを目指してデザインされたオープンソースの無料フォント「Overused Grotesk」を紹介します。 8種類のウェイトに可変フォントも揃っており、Webフォントとしても利用できます。最終的にはキリル文字など多言語にも対... 続きを読む

これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon

2023/02/20 286 users SVGアイコン 太っ腹ライセンス 改変 min UIデザイン用

WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 Min... 続きを読む

商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon

2022/07/27 473 users SVGアイコン 太っ腹ライセンス 改変 SVG 再配布

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの... 続きを読む

WebフォントはGDPRに抵触？WordPress.orgが書き換えを呼びかけ

2022/06/21 5 users wordpress.org テーマ GDPR 米国時間 抵触

WordPress Tavernは6月20日(米国時間)、「WordPress.org Strongly Urges Theme Authors to Switch to Locally Hosted Webfonts – WP Tavern」において、WordPress.orgのテーマチームがWebフォントの使用を停止し、ローカルでホストされているWebフォントを使用するようにテーマを更新することを強く推奨していると伝えた... 続きを読む

Webフォントを分割して読み込む際にunicode-rangeを指定しなかったらどうなるのか - 私が歌川です

2022/03/24 11 users

表題のことについて検証してみましょう。 目次 目次 前提 Webページ上で独自のフォントを読み込むには フォントファイルのサイズ フォントファイルのサイズを抑える工夫 フォントファイルを分割し、必要に応じて読み込む フォントファイルを圧縮する 前提おわり 本題 規格によると 4.5. Character range: the unicode-ra... 続きを読む

【商用OK】Google Fontsで使えるオススメ日本語フリーフォント31個まとめ - PhotoshopVIP

2021/09/16 303 users ウエイト PhotoshopVIP 日本語フリーフォント

この記事では、Google Fontsで使える日本語フリーフォントをまとめてご紹介します。 Google Fontsには現在、31の日本語書体が提供されており、すべてのウェイトを合わせると、74フォントが商用OK＆完全無料となっています。 フォント選択の幅が広がるWebフォントを利用して、ウェブサイトのデザインをグッと良くしてみま... 続きを読む

フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD

2021/08/18 20 users POSTD フォント パフォーマンス 戦略 オプション

クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込み... 続きを読む

CSSの実装方法を少し改善するだけで、Webページの読み込み・表示を最適化するテクニックのまとめ | コリス

2021/06/29 20 users コリス CSSアニメーション レイアウト 速度 アクション

CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブ​バイタルに大きな影響を与えます。 ウェブ​バイタル（Web Vitals）を最適化するためのCSSのテクニックを紹介します。 CSS for... 続きを読む

2021年、Webフォントの表示を最適化するテクニック | コリス

2021/06/03 24 users コリス フォントファイル パフォーマン システムフォント 通常

Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマン... 続きを読む

Webフォント読み込み戦略（2021年） - MOL

2021/04/21 356 users MOL 戦略

Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フ... 続きを読む

【修正済み】はてな匿名ダイアリーで「増田」が「吉田」と表示される不具合が発生していました - Hatelabo Developer Blog

2021/04/01 120 users 増田 平素 匿名ダイアリー 吉田 文字列

はてな匿名ダイアリー担当の吉田です。平素よりはてな匿名ダイアリーをご利用いただきありがとうございます。 2021年4月1日（木）0:00頃より、はてな匿名ダイアリーで「増田」という文字列が「吉田」と表示される不具合が発生していました。原因は「増田」を「吉田」と表示するWebフォントの配信によるもので、現在は修... 続きを読む

Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗｜note

2021/01/25 10 users Note Web Font Core Web Vitals

だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vita... 続きを読む

フォントワークス8書体が無料公開！商用利用や埋め込みも可能で「Google Fonts」にも対応 | Game*Spark - 国内・海外ゲーム情報サイト

2021/01/19 179 users Game*Spark フォントワークス GitHub グレー

フォントワークスは、手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体を、GoogleのWebフォント「Google Fonts」にて配信開始しました。 また、これに伴い、GitHubにて「Google Fonts」と同じく「SILオープンフォントライセンス」の元で各書体が無料公... 続きを読む

Next.jsのFont Optimizations（Webフォントの最適化）を試してみる

2020/12/28 36 users Next.js 最適化 リポジトリ プルリクエスト 説明文

以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 Font Optimizationとは まだドキュメントに説明が書かれていないので、プルリクエストの説明文を引... 続きを読む

Webフォントってなに？ 遅くないの？ SEOにはどうなの？ 「フォントおじさん」こと関口さんに聞いた。 | インタビュー | Web担当者Forum

2019/04/04 61 users SEO 書体 ブランディング 関口さん Web担当者Forum

ブランディングや作業効率などの点からWebフォントを使ったWebサイトが増えてきている。一方で、いまだに「Webフォントって遅くない？」「SEOにはどうなのよ？」という疑問も尽きない。そこで、今回は「フォントおじさん」ことソフトバンク・テクノロジーの関口浩之さんにWebフォントについて聞いた。 ※上写真の書体は、... 続きを読む

Webフォントとして日本語も使える！Adobe Fontsの使い方 | Webクリエイターボックス

2019/04/02 49 users Adobe Fonts フォント Adobe Google

2019年4月3日 Webサイト制作, フォント, 便利ツール Webフォントとしておしゃれなフォントが使えるサービスで人気なのがGoogle Fontsですね。無料で手軽に使える便利サービスです。しかし、Webフォントを提供しているのはGoogleだけではありません。デザイナー御用達のAdobeも「Adobe Fonts」を提供しています。今回はこ... 続きを読む

これなら簡単！SVG対応、アイコンを組み合わせてWebフォントのセットを作成できる無料ツール -Webfont | コリス

2019/01/28 34 users WebFont コリス MacOS対応 アイコン 手元

複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。 ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWebフォントを簡単に作成できます。 Webfontの特徴 アイコンを自由に組み合わせ 手元のアイコンを自... 続きを読む

Google、Google Webフォントで日本語を正式サポート | Webアプリ | Macお宝鑑定団 blog（羅針盤）

2018/09/29 18 users 羅針盤 フォント Google Fonts Blog 商用利用

Googleが、Webフォント「Google Fonts」で日本語を正式にサポートしたと発表しています。 完全無料でWebフォントを使用でき、商用利用でも無料で利用することが可能です。 Google Fonts + 日本語早期アクセスで提供されていたフォントのうちM+ 1p、M+ Rounded 1c、さわらび明朝、さわらびゴシックに加え、新しくGoogleの... 続きを読む

Google Fontsが日本語WEBフォントを正式サポート – Dream Seed

2018/09/29 359 users Dream Seed Google Fonts 難点 反面

ユーザーの端末にインストールされていないフォントを表示できるWEBフォント。便利な反面、日本語など文字数が多いフォントではファイルサイズが大きくなり、通信量が増えてしまうのが難点です。 しかし、そんな日本語フォントをGoogleのWEBフォントサービス「Google Fonts」がサポートしました。といっても、以前から早... 続きを読む

HTTPS有効時の混在コンテンツ対応のため、テーマストアに投稿されたテーマ内の一部URLを書き換えました - はてなブログ開発ブログ

2018/05/15 16 users テーマストア https テーマ内 はてなブログ開発ブログ

2018 - 05 - 15 HTTPS有効時の混在コンテンツ対応のため、テーマストアに投稿されたテーマ内の一部URLを書き換えました お知らせ news はてなブログでは2018年2月22日から、ブログをHTTPSで配信できる仕組みの提供を開始しました。これにより、HTTPSで配信されるブログでHTTPの画像やWebフォントなどを読み込んだテーマ（CSS）を利用した場合に混在コンテンツ（Mixe... 続きを読む

フォント素人のWebエンジニアが、「フォントおじさん」に聞いてみた！Webフォントの最近の事情とか | HTML5Experts.jp

2017/09/14 71 users Webエンジニア HTML5Experts.jp 事情

こんにちは、編集長の白石です。 この記事は、9月24日に開催される HTML5 Conference 2017 に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ソフトバンク・テクノロジーの関口浩之さんです。 関口さん... 続きを読む

[JS]レスポンシブ対応！テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty | コリス

2017/08/01 47 users 超軽量スクリプト コリス サイズ スクリプト 日本語

テキストを親コンテナの幅に応じて、ぴったりに配置されるようにサイズ変更する超軽量スクリプトを紹介します。 レスポンシブ対応で、日本語にもWebフォントにも対応しています。 Fitty Fitty -GitHub Fitt ...記事の続きを読む 続きを読む

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス

2017/07/26 309 users コリス Chromium プロパティ CSS 新しいプロパティ

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium ）。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は... 続きを読む

Webアイコンフォント「Font Awesome」の使い方と注意点について - webproduct-lab

2017/04/24 29 users bookmark webproduct-lab さい 注意点

2017 - 04 - 25 Webアイコンフォント「Font Awesome」の使い方と注意点について css webツール・サービス Bookmark! Facebook Twitter Google+ Pocket Webアイコンフォント使ってますか？ Webフォントの中でも画像を使わずにリストマークなどにアイコンを表示することができる“アイコンフォント”は、レスポンシブデザインのようなサイ... 続きを読む

黒板風囲み枠CSSでブログの解説記事をまとめよう - Minimal Green

2017/02/25 30 users Minimal Green lightgauge 解説記事

2017 - 02 - 25 黒板風囲み枠CSSでブログの解説記事をまとめよう CSS ブログカスタマイズ はてなブログ 色白おばけ ( id:lightgauge ) さんのブログ記事で使われていた”黒板風囲み枠”に インスパイア （笑）され、私も黒板風囲み枠のCSSを作ってみました。 はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚 CSSは参考せず自分で組... 続きを読む