先日の「サマサン・ドノクン」に続いて、「ピグモ00」「マメロン」「廻想体」「金畫字」など、人気が高いフリーフォントをたくさんリリースされているもじワク研究さんから、さらに新作のフリーフォントがリリースされました！ 今回の「ポプらむ☆キウイ」はJIS第1水準漢字＋αが揃ったかわいい極太フリーフォントで、オープンソースで利用できます。 ポプらむ☆キウイ ではさっそく、フォントのダウンロード方法を。 下記ページにアクセスし、ページ下部「キウイ皮ごと囓る」の下「Download」をクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。 ポプらむ☆キウイ ライセンスはSIL Open Font Licenseで、個人でも商用でも無料で利用できます。詳しくは、ダウンロードファイル「仕様説明.txt」をご覧ください。 ダウンロードできるフォントのフォーマットは、下記の通り。 .otf
Matt Hobbs (@TheRealNooshu) is Head of Frontend Development at the Government Digital Service. An experienced frontend developer, he is passionate about using his skills to build accessible and performant user interfaces. Matt makes a point of keeping on top of the latest technology and tools, is interested in all aspects of interface development, and is a keen advocate for best practices. In this
UDフォントって？ ウェブフォント選定の極意！基本から最新トレンドまで徹底解説 | 【レポート】デジタルマーケターズサミット2024 Summer
印象のほかに、フォントの重要な役割として「情報を伝えること」がある。そのため、「読みやすさ」は重要な要件だ。それを強く意識して開発されたフォントとして「ユニバーサルデザインフォント（UDフォント）」が注目されている。 もとはディスレクシア（文字の認識に問題があり、長い文章を読むことが苦手になる障害）の傾向がある人や、弱視で細い字が苦手という人でも、読みやすいようにデザインされた。さらに一歩進んで障害の有無や年齢などにかかわらず、“誰にとっても使いやすい”デザインを目指す「ユニバーサルデザイン」の考え方に基づくようになった。可読性や視認性、判読性に優れ、近年は種類も増えて利用しやすくなり、公共性の高いWebサイトを中心に活用例が増えてきているという。 UDフォントは、さまざまなフォント作成会社が力を入れているが、とりわけ「モリサワ」は実験や調査を積極的に行なっており、論文やレポートがサイト上
Creating a React Component Library using Rollup, Typescript, Sass and Storybook
At work we have a number of front-end projects that are worked on by different project teams. Each of these projects are designed by our internal designer and had a lot common with them (same inputs, buttons designs etc). Up until now, we had no shared style-sheets or components. Components across projects were created from scratch, rewritten or copy pasted over each time. I saw a real need for an
結論 結論から話します。サブセット化してウェブサイトにフォント適用するまでに以下の流れが必要です。 Google FontsからはCJKjpはダウンロードできないのでこのGitHubから落とす（設置してくださってる方、本当にありがとうございます🙏）第一水準とか人名漢字とか入れたい文字を定義しておくサブセットフォントメーカーでフォントファイル作成WOFFコンバータでwoff版作成CSSで@font-faceの指定 以降、丁寧に説明してきます。時間ない人は必要なところだけ読んでね。 サブセット化とは？ フォントデータから必要な文字データのみに限定して、オリジナルのフォントデータにまとめなおすことをサブセット化といいます。たとえば「國（国の旧字体）」といった文字はなかなか使わないと思うので、この手の文字一式を削ぎ落としてサブセット化することでフォントデータを軽量化でき、ウェブサイトの読み込み高
My current HTML boilerplate posted on 09.04.2021 Every element I use for the basic structure of a HTML document, with explanations why. Traducción a Español by www.ibidemgroup.com. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document
ブログ名のタイトルのフォントでふい字か力強い太字かへの変更方法 まずブログを初めてこの『minimalism』のデザインテーマに変えたら、最初のタイトル画像はこちらの普通のゴシック文字。 ゴシック文字 シンプルだけどなんか物足りない（笑） 次にふい字！！！ ふい字 柔らかくなって、可愛らしい感じになりました（笑） ゴシック文字は普通で悪くないし、ふい字は柔らかいイメージでこれまたいい！！！ でも、なんか普通過ぎて物足りない！！！（笑） それで、最後に私の決定した今のタイトルです。 いまのタイトル 私が決めたブログ名は、英語にしてしまったのもあり『読めないよ』って思ってる方もいるかもしれません。でも、しっかりとカタカナ付きでわかりやすく、字も大きくてとてもいい感じだなと自画自賛しています。 さらにブログ名も覚えてもらえたらいいな！！！（笑） ブログ説明をどうしようか悩んだんですが、なくすこと
NGINX: try_files is evil too by Danila Vershinin, February 18, 2020 , revisited on January 24, 2025 We have by far the largest RPM repository with NGINX module packages and VMODs for Varnish. If you want to install NGINX, Varnish, and lots of useful performance/security software with smooth yum upgrades for production use, this is the repository for you. Active subscription is required. The benefi
GitHub - fontello/ttf2woff: Font convertor, TTF to WOFF, for node.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
google webfonts helper
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!
オープンソースの日本語ゴシック体フォント M+ OUTLINE FONTS1 をWindows上のブラウザ(Firefox, Chromium)のフォントに設定すると、 ガビガビになっている。一部のフォントで発生するこのクソの原因はフォントヒンティング2で、ヒンティング情報をフォントファイルから消せばガビガビは消える。 これをFontforgeを使って手作業でやったのが前回。(必要なことは今話したので、読まなくてもいい) 【Fontforge】ブラウザやElectron系ソフトで表示される文字がガビガビになってる時の解決法と、ヒンティングについて感じたこと 今回はこれを自動化する。 使うもの bashかなんか 自分はWSLのUbuntu 18.04でやっているが、シェルスクリプトが動けば仮想マシンでもMacbookでもUserLAndでもいいと思う。たぶん ttfautohint(GitH
Google Fonts APIのソースコードを調べてみました | Web技術Tips | ホームページ制作のDOE【横浜】
早期アクセスの頃と比べたらフォントの読み込みスピードは改善されたとは言え、まだまだページ表示速度のボトルネックとなることが多い Google フォントですが、このスタイルシートの中身を調べてどのようにフォントの読み込みがされているのかを知って、可能であればページ表示速度改善のヒントにしたいです。 Google フォントを使う方法はいくつかありますが、最もメジャーなのは<head>内に以下のコードを追加する方法です。 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+San
Looking fine with Firefox 89 – Mozilla Hacks - the Web developer blog
While we’re sitting here feeling a bit frumpy after a year with reduced activity, Firefox 89 has smartened up and brings with it a slimmed down, slightly more minimalist interface. Along with this new look, we get some great styling features including a force-colors feature for media queries and better control over how fonts are displayed. The long awaited top-level await keyword for JavaScript mo
Through the pipeline: An exploration of front-end bundlers
This last week I spent a lot of time buried deep in the documentation of parcel, rollup, and esbuild. I've been on a quest. Mainly one that starts from a place of being fed up with webpack being slow and unwieldy to configure and manage. And I've been hearing and even playing around with these other bundlers a bit, well enough to know a happier path should exist. My bundling needs Let me lay out m
fail2banの設定について
●インストール sshへのブルートフォースアタックの対策として「Denyhostsの設定方法」に記載しているとおり設定済みです。 DenyhostsでFTPアクセスに対するブルートフォースアタックを拒否したいと思い色々調べたところ、有益な設定情報が無かったため「fail2ban」で設定することにしました。 fail2banをインストールするためにEPEL（EPELを利用するための設定方法）を設定しておきます。 参考URL：Fail2banで不正アクセスをブロックする方法！ 準備が出来たらfail2banをインストールします。 ※CentOS Stream 8、Rocky 8の場合 # dnf -y --enablerepo=epel install fail2ban 依存性関連で下記もインストールされました。 fail2ban-firewalld-0.11.2-1.el8.noarch.r
Fail2Banを使って不正なアクセスを遮断する（全自動）
Fail2Banはログを監視し、おかしなアクセスがあったらBAN、指定時間を過ぎたらUNBANを自動で実行してくれるツールです。 Fail2Ban自体に遮断する機能はありませんが、iptablesやfirewalldと連携して遮断と解除を自動でやってくれるので非常に楽ちんです。 Fail2Banがログを監査 > しきい値を超えたIPを発見 > BAN（iptablesやfirewalldで遮断） > 指定時間経過でBAN解除 という流れです。 [recidive]というルールも標準で用意されており、再検知した場合はより厳しい条件でのBANも可能です。 インストールはパッケージ管理ツールなどで導入するだけなので省略し、実際の設定方法などを見ていきます。 定義さてれいるフィルタ（監視対象） デフォルトで対応しているサービスは以下のディレクトリにあるxxx.confで確認できます。 /etc/f
The importance of `@font-face` source order when used with preload - Matt Hobbs
Skip to main contentThe importance of `@font-face` source order when used with preloadAuthor:Matt HobbsPublished: 23 January 2021Updated: 29 January 2021Tagged:web-performance,webpagetest,ramblings,webperfReading time: 📖📖📖 13 minute read The other day I decided to run a quick WebPageTest (WPT) run over the latest version of the White House website launched for President Biden's term in office (
Windows Terminalには、Cascadia Codeと呼ばれるOpenTypeフォントが付属する。このフォントは、Windows Terminalと同時に開発された、いわば「専用」フォントだ。オープンソース・プロジェクトのプロジェクト名としてはCascadia-Codeとなっている。しかし、この名称は、このフォントの1つのバリエーションであるプログラマ向け合字を持つフォント名でもあるため、ここでは、プロジェクトが提供するフォント全体を「Cascadiaフォント」と表記する。今回は、このCascadiaフォントを使って、Windows Terminalのフォント機能について解説する。ただし、フォント設定などには、OpenTypeの基本的な知識が必要になる。ここでは、まず、OpenTypeやその実装例としてのCascadiaフォントに関して解説を行い、次回、具体的な設定を解説するこ
How To Fix Cumulative Layout Shift (CLS) Issues — Smashing Magazine
Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric. Cumulative Layout Shift (CLS) attempts to measure those jarring movements of
A "full" WebFont that includes all stylistic variants, which you may not need, plus all the glyphs, which may go unused, can easily result in a multi-megabyte download. In this post you will find out how to optimize loading of WebFonts so visitors only download what they will use. To address the problem of large files containing all variants, the @font-face CSS rule is specifically designed to all
ブログは、かわいいフォントで書きたい。 手書きで書いたようなフォントがあったらいいな。 と思っている方はいらっしゃいませんか？？ もともと使っているフォントは、見やすくても、普通過ぎてつまらないですよね。 たまには、フォントを変えてみませんか？ 強調したい部分だけ一部を変えるだけでも、雰囲気が変わりますよ。 でも、フォントを変えるにはどうしたらいいの？ 難しそう、、、 大丈夫です。ただCSSとHTMLに張り付けるだけで簡単にできます。 では、一緒にやり方を見ていきましょう。 はてなブログのみの場合ですので、その他のプラットホームをお使いの方はご注意ください。 「こんにちは」のフォントを変えたいと思います。 HTMLは、今時点では <p>こんにちは</p> となっています。 次のようにしてみましょう。 <p style="font-family: HuiFontP109;">こんにちは</p
Snow Monkeyのテーマをmy-snow-monkeyでカスタマイズする、webpackを使って作る快適な開発環境のサンプル | WEBKEI.dev
このサイトは、Snow Monkeyというテーマを使用していて、Snow Monkeyが推奨しているmy-snow-monkeyプラグインを使用してテーマのカスタマイズを行っています。 WordPress テーマ Snow Monkeyどんな味付けにも染まる。高級お出汁のような WordPress テーマ、Snow Monkeysnow-monkey.2inc.org いくつかのサイトにSnow Monkeyをインストールしているので、my-snow-monkeyプラグインのサンプル、スターターキットを作りました。 このスターターキットは、フロントエンドの開発で使っているWebpackを使用し、js、scssを簡単にビルド、LiveReloadする設定にしています。（基本jsはes6+、cssは、scssで作成するようにしています。普通のjs、cssでも大丈夫です。） css in jsで
はろー はろー 今日作るもの これですね（下は画面キャプチャ まあささっとやってこ CSS デザインCSSに以下を追加 // 手書きフォント @font-face { font-family: 'HuiFontP109'; src: url("/fonts/public/HuiFont/HuiFontP109.eot"); src: url("/fonts/public/HuiFont/HuiFontP109.eot?#iefix") format("embedded-opentype"), url("/fonts/public/HuiFont/HuiFontP109.woff") format("woff"), url("/fonts/public/HuiFont/HuiFontP109.ttf") format("truetype"), url("/fonts/public/HuiFo
HOMESEOAMPWebサイトの表示速度の計測＆改善方法を徹底解説！ Webサイトの表示速度の計測＆改善方法を徹底解説！ Webページの表示速度が遅いと、どんなデメリットがあるかご存知ですか？ 本記事では表示速度がもたらす影響と代表的な表示速度の確認方法であるGoogle PageSpeed Insights、Google Analytics、Chromeデベロッパー・ツールの使い方をご紹介します。 さらに、具体的な表示速度の改善方法に加え、ユーザーの体感速度を向上する最新の技術までを解説します。 サイトリニューアルを検討されている方は、こちらの記事をご覧ください。 【見積付き】Webサイトリニューアルの費用を決めるときに担当者が検討すべき5つのポイント また大規模サイトを運営されている方は以下の記事をご覧ください。 表示速度だけでなくその他のSEOの基礎知識もご紹介しております。 大規
フォントを様々な形式に変換する fontconv を作りました。 .ttf, .otf, .svg, .woff, .woff2 の相互変換とサブセット化に対応しています。.eot も出力だけは対応しています。 なぜ作ったかというと、フォントを Web 上で利用するための woff2 最適化に苦労したからです。 私の場合は以前 ttf2svg を自作したので、 ttf2svg -> svg2woff2 の2回で woff2 は最適化できるようにしていたのですが、 巷のアイコンは woff2 形式でしか配布されていないことがあることに気付きました。 これがなかなか強敵で、woff2 をロードして最適化した後、 woff2 へ再変換できるライブラリが見つかりませんでした。 具体例を上げれば Material Icons の最適化は大変で、びっくりしました。 さすがにこれはおかしいなと思い、様々
Typography is fundamental to good design, branding, readability, and accessibility. Web fonts enable all of the above and more: the text is selectable, searchable, zoomable, and high-DPI friendly, providing consistent and sharp text rendering regardless of the screen size and resolution. WebFonts are critical to good design, UX, and performance. Web font optimization is a critical piece of the ove
昔は記事が少なかったけど、最近は増えてきたので簡単に言っておきます。 それは、 display:swap です。 @font-face に display:swap です。 例えば以下の様なコードだとNGです。 @font-face { font-family: 'icomoon'; src:url('https://yws.tokyo/wp-content/plugins/yws/fonts/icomoon.eot') format('embedded-opentype'), url('https://yws.tokyo/wp-content/plugins/yws/fonts/icomoon.ttf') format('truetype'), url('https://yws.tokyo/wp-content/plugins/yws/fonts/icomoon.woff') forma
Kasper Andreassen for Enterspeed Posted on Sep 19, 2022 • Originally published at enterspeed.com That's right, I said it. Making a fast website is super easy, barely an inconvenience. I've built a website that gets a perfect score in Google Lighthouse and that can be deployed right to the edge. It's built completely in a high-performant, battle-tested language that will last for ages. Want to see
最近のウェブサイト制作で実際に使用しているWebツールや情報記事などを12個紹介します。地味だけど便利に使えるものばかりなので、ぜひ参考にしてみてください。 画像サイズ変更ツール クライアントからいただいた写真が大きすぎることがあるので、作業前に画像サイズ変更ツールを使って、利用しやすいサイズに変更しています。 複数画像をドラッグ&ドロップして、画像サイズの最大幅を指定するだけ。複数の画像を一括でサイズ変更してくれるのはかなり嬉しい。 JPG、PNG、GIFに対応しています。 画像サイズ変更ツール 文字数カウント クライアントに文章を用意していただくときに使用しています。 文章量は、画像や動画、レイアウトなど、文章の周辺にある要素とのバランスを見ながら決めています。その文字数をワイヤーフレームに記載するさいに、文字数カウントツールを使用しています。 「空白と改行をふくむ文字数」「空白と改行
A New Way To Reduce Font Loading Impact: CSS Font Descriptors — Smashing Magazine
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts. Font loading has long been a bugbear of web performance, and there really are no good choices here. If you want to use web fonts your choices are
Case Study — Using a JavaScript component inside a Haskell application | The Haskell Programming Language's blog
Mateusz Goślinowski January 08, 2025 [GHC] #javascript #case-study GHC since version 9.8 allows us to create callbacks from JS to Haskell code, which enables us to create full-fledged browser apps. This article shows how to use the JS backend with foreign component libraries. repository: https://github.com/Swordlash/halogen-blog ghc used: javascript-unknown-ghcjs-ghc-9.12.1 (ghcup) Preface Any use
Static site generation with React from scratch - LogRocket Blog
If you ask me what framework has the best component model, I’d say React without hesitating. There are various reasons for this. On the one hand, React makes components without much ceremony and compromises. The model is also pretty much independent of React. With the new JSX factory, you wouldn’t even see an import of React in TypeScript or Babel. Obviously, there must be one caveat when it comes
「Web フォント」を使って OS 依存しない日本語対応の等幅フォント Noto Sans Mono CJK JP を適用する - Corredor
最近の Windows と Mac は、「游ゴシック体」という同一のサンセリフ・フォントを標準搭載するようになった。メイリオとヒラギノ、MS P ゴシックと Osaka のように、OS ごとに標準フォントが異なり、ウェブサイトの見栄えが OS によって異なってしまう問題を最小限にできるようになってきた。游ゴシック体の適用方法については以前から数回記事を書いてきた。 neos21.hatenablog.com neos21.hatenablog.com ↑コッチで紹介しているやり方の方が良い。 一方、このサイトは技術ブログであり、コードを掲載する機会も多いので、等幅フォントについても気を使う。コード内のコメントには日本語を使うので、日本語文字を有する等幅フォントで、OS 間で差異がない (少ない) モノをずっと探してきた。残念ながら、Windows は MS ゴシックくらいしかなく、Mac
高品質な書体に定評のあるインドのフォント制作会社ITFが、新しいフォントサービスFontshareを開始したのでご紹介します。 このサービスは、これまで有料で販売されていたフォントを無料ダウンロードできるだけでなく、Webサイトで手軽に利用できるAPIサービスが特長。 Google Fontsを利用しているひとは、新しい代替サービスとして活用してみてはいかがでしょう。 Fontshareとはどんなサービス？ Fontshareは、Google Fontsの人気書体Poppinsでも知られる、Indian Type Foundry（ITF）が新しくはじめたサービスで、Google Fontsのようにフォント一覧よりお好みの書体を選び、サイトに追加できます。 販売されている書体と同等の高品質さもポイントで、すべてのフォントは無料ダウンロード可能で、個人、商用問わずに利用できます。 あまりフォン
Get All That Network Activity Under Control with Priority Hints
Get All That Network Activity Under Control with Priority Hints The browser is very good at prioritizing resources requests on its own. But it's not always great. Priority hints makes it easy to provide explicit instructions as to how and in what network activity occurs. Open up the browser's network tab and you'll see a lot of activity. Assets are being downloaded, information's being submitted,
Google Fontsを利用する際も細かい工夫を重ねる事でWEBパフォーマンスをさらに向上させる事ができます。 Google Fontsは常にユーザー環境・ブラウザに応じた最適な形式を提供する機能・キャッシュ機能が搭載されています。 基本は全てのバリエーションではなく、部分的に限定して利用する事です。 Google Fontsとは Google Fontsは、現在WEB全体で29兆回以上も利用されているフォントです。 実に900種を超える美しいフォント群が用意されていて、それらが無料で利用できるのです。 逆にGoogle Fontsを使わないままだと、デバイスにインストールされている「システムフォント」に頼らざるを得なくなります。 Google Fontsを工夫してパフォーマンスを上げる ブラウザが各フォントをダウンロードするため多少の通信が必要ですが、所要時間は微々たるものです。 しか
Incremental Font Transfer
Incremental Font Transfer W3C Working Draft, 20 February 2025 More details about this document This version: https://www.w3.org/TR/2025/WD-IFT-20250220/ Latest published version: https://www.w3.org/TR/IFT/ Editor's Draft: https://w3c.github.io/IFT/Overview.html History: https://www.w3.org/standards/history/IFT/ Feedback: public-webfonts-wg@w3.org with subject line “[IFT] … message topic …” (archiv
Over the years, a lot has changed with web fonts technology. What used to be a niche practice that required an image of text or a Flash plug-in (and that compromised your website’s search engine optimization) is now a standard practice across the web. Once upon a time, you had to load an entire font before the page loaded—with styles and characters you may not have even used—but even that has beco
Your Cache Headers Could Probably be More Aggressive It's common for modern hosts to cache static assets in a flexible, but not most optimal way. Let's explore why that is and what we can do to push cache performance (for some assets) even further. We've got it real good when it comes to standing up websites these days (especially static ones). Modern hosts like Vercel and Netlify take care of a l
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料！ 極太フォントでかわいい、漢字も揃っているキウイ皮ごと囓るのフリーフォント「ポプらむ☆キウイ」
A font-display setting for slow connections
【2023年版】NotoSansCJKjpをサブセット化する | techlab / baigie
My current HTML boilerplate - Manuel Matuzovic
ブログタイトルをふい字か力強い太字への変更方法『minimalism』はてなブログ
NGINX: try_files is evil too - GetPageSpeed
(M+とか)ブラウザ, VSCodeで表示が汚くなるフォントを救え！【シェルスクで自動化編】 - Qiita
Windows Terminal ベスト設定 第16回「フォント指定」
Optimize WebFont loading and rendering | Articles | web.dev
【手書きフォント】簡単！cssとhtmlにコピペするだけ（はてなブログ） - やくー
手書きレター風な囲みをCSSだけで作るやり方 - アゴ乗せ日記
Webサイトの表示速度の計測＆改善方法を徹底解説！
フォントを様々な形式に変換する fontconv を作った
Reduce web font size | Articles | web.dev
「ウェブフォント読み込み中のテキストの表示」は無視してOK！？
Making a fast website is SUPER EASY 😏
サイト制作で実際に使用している地味に便利なWebツールなど12個紹介してみる | BUILD Journal
商用可！有料フォント50個を無料で利用、ダウンロードできる新サービス Fontshare
Google Fontsのパフォーマンスを最適化する6つの方法
An API for fast, beautiful web fonts | Articles | web.dev
Your Cache Headers Could Probably be More Aggressive