フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
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という
Release v5.2.1 · IBM/plex
👍 76 syncra, tani1987, phut-tran, kgxxx, masterTwig-0902, Aki-Toyo, naokiy, pekeq, zonuexe, yakumo-saki, and 66 more reacted with thumbs up emoji 😄 5 mjabbink, chuck0523, moesuke, Ren33000, and alisonjoseph reacted with laugh emoji 🎉 55 jamesrwaugh, acid-chicken, tsukumijima, azu, sheepla, msksk, AndroPlus-org, amplextro, omega-takai, syncra, and 45 more reacted with hooray emoji ❤️ 36 yabuki,
Dev Fonts
Filter fonts0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
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において明朝体はNoto Serif CJKを使うべし -IE11対応版｜TechRacho by BPS株式会社
こんにちは。5月に産休育休から復職したデザイナーのニシです。 最近、健康と体力作りのために筋トレを始めました。毎日昼休みにコヤマさんと一緒に10分ほど筋トレしてます。皆さんもいかがですか。 今回は、レスポンシブサイトをデザイン・コーディングする際に明朝体の指定は何にするのが一番いいのか、試行錯誤した結果得た最適解を書きます。 最初に：結論 先に結論をいうと、 Google FontsのNoto Serif CJK（源ノ明朝）を使う IE11対応のためGoogle Fontsの設定で「Japanese」を必ず選択する です。Japaneseを選択しなかったというだけでかなり、右往左往してしまいました（後述）。 Google Fontsとしては他にも明朝体の選択肢はありますが、癖のない良い感じの明朝体というとやっぱりNoto Serif CJKかなーと思います。しかしいずれ、さわらび明朝も使っ
Noto emoji, a new black and white emoji font with less color, may gain us more in the long run Posted by Jennifer Daniel, Creative Director - Emoji & Expression In 1999 — back when Snake 🐍 was the best thing about your phone 📱 — there were three phone carriers in Japan 🗾 . On these phones were tiny, beautiful pictures called emoji (meaning “picture” and “character” in Japanese 🥰). These 176 im
Web フォントを使って contenteditable から脱出する - LINE ENGINEERING
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい
Intro Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。 Web Font の静的サブセット 本サイトで提供している Web Font は当初、文字を事前に選定して生成したものを使っていた。 Noto Sans の Web Font 対応とサブセットによる最適化 当時はコンテンツがなかったが、コンテンツも増えた後は、コンテンツの原稿である markdown ファイルから使用している文字を抽出して生成するように変更していた。 これでおおよそ必要最小限のサイズにすることができていた。 Regular と Bold の最適化 本サイトでは Font Weight として Regular(400) と Bold(700) を提供しているが、これまでは抽出した文字種を Bold/Regular 両
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce
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
Google Fonts illegal in EU
The instructions for using Google Fonts tell you to do something that is clearly illegal in the EU. This has been confirmed more than six months ago by the German court. In the aforementioned case the website owner had to pay 100 euro to the complainer and faced a penalty payment of up to 250k euro if failing to comply. It is remarkable that Google does not warn developers for this infringement, a
はじめに 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
19 May, 2020 Speed Up Google Fonts Written by Harry Roberts on CSS Wizardry. Table of Contents Testing Default/Legacy font-display: swap; Async CSS preload preconnect Bonus: font-display: optional; Comparisons and Visualisations Findings Google Fonts Async Snippet Ten-Second Version: If you really can’t be bothered going to all of the effort outlined in this post, there is a super rough-and-ready,
IE の歴史 | Yomotsu net
IE 1IE 1 は 1995 年の 8 月にリリースされました。 Spyglass 社から Mosaic のからライセンスを取得し、ほぼそのまま Mosaic をベースに IE 1 をリリースしました。About Internet Explorer を開くと Mosaic ベースであることが記載されています。 IE 1 は Windows には組み込まれておらず、$49 の Microsoft Plus ! という別売りのパッケージの一部として売られていました。IE 1 は HTML1 や TCP/IP などに対応した素朴な Web ブラウザーで、1 MB ほどのプログラムでした。Mosaic から始まったというのは、つまり Firefox と兄弟とも言えるわけですね。（Firefox は Netscape の後継ブラウザーであり、Netscape は Mosaic を開発したマーク・ア
FontCDN
Search and Proxy for Google web fonts
Bunny Fonts help make the internet faster, safer and GDPR compliant!
chrome拡張機能の作り方 この記事では、一人でchrome拡張機能を開発して、ストアに上げるためのデータを作るまでをご紹介します。 また、有料のサンプルコードをBaseにて提供しています。 （googleで検索したページのタイトルをジョジョの名言に置き換える拡張機能です。） （購入はこちらから） utamaro.base.shop サンプル画像（左の検索結果が、右の画像のようになるサンプルです） ※ html, css, javascript, npmで依存関係の管理ができることを前提条件としています。 まずは、拡張機能を作るにあたっての要件を決めます。 要件 規模が大きくなっても、効率的に開発できること console.logデバッグをビルド段階で削除すること（ビルド後のソースに含まれない） html内のdomを作成する際はテンプレートとして用意したものを使う scssで開発する f
Cloudflare Fonts: enhancing website font privacy and speed
Cloudflare Fonts: enhancing website font privacy and speed09/25/2023 This post is also available in 简体中文, 繁體中文, 日本語 and 한국어. We are thrilled to introduce Cloudflare Fonts! In the coming weeks sites that use Google Fonts will be able to effortlessly load their fonts from the site’s own domain rather than from Google. All at a click of a button. This enhances both privacy and performance. It enhance
First Batch of Color Fonts Arrives on Google Fonts - Material Design
Customize color palettes, add gradients, and more with COLRv1
This post describes some techniques to make front-end apps load faster and provide a good user experience. We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache? I won't say much how the backend should deliver resources, whether your page even needs to be a client-side app, or ho
Googleフォントを高速で読み込む！非同期で読み込む方法とpreload記述の方法について紹介。 - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
サイトの表示速度早くしたい〜〜まずはここでで自分のサイトを確認してみよう😊 PageSpeed Insights 何点でしたか？70点以上ならとりあえず一安心。 私は悲しいことに50点でした(T_T) 今回は、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」を改善したい！Google Font編です。 レンダリングブロックって何？ レンダリング＝読み込んで表示すること レンダリングブロック＝読み込んで表示するのをブロック！ 一般的なブラウザは、<head>内で指定されたファイルの読み込みが終わるまで<body>を表示しないのです。 表示されない→閲覧者にとっては真っ白な画面を見続けることになってしまいます。 できるだけ避けたい事案ですね(T_T) Googleフォントを早く読み込みたい当ブログ「もぐでざ」はアルファベットにGoogleフォント「Montserr
The Complete Guide to Rails Performance読書会をしました - メドピア開発者ブログ
Blog JavaScript Performance in the Wild 2020 We rendered a million web pages to find out what makes the web slow We rendered the top 1 million pages on the web, tracking every conceivable performance metric, logging every error, noting every requested URL. To our knowledge this produces the first dataset that connects performance, errors, and library use on the web. In this article we analyze what
In my previous post, I wrote about system fonts and their advantages over web fonts. I encouraged a ‘system fonts first’ approach, arguing that, compared to system fonts, web fonts (a) can negatively impact performance, (b) use more data, and (c) increase your site’s energy consumption. But a web without web fonts would be a far less interesting one — maybe by using web fonts a little more respons
Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 後編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to write Javascript in Rails 6 | Webpacker, Yarn and Sprockets 原文公開日: 2019/12/13 著者: Younes SERRAJ サイト: CapSens -- フランスのFinTech系Web開発会社です タイトルは内容に即したものにしました。画像は元記事からの引用です。 更新情報 2020/01/17: 初版公開 2021/06/10: 更新 （前編からの続き） Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 前編（翻訳） 今もJavaScriptコードをSprocketsで扱える Webpackerドキュメントには以下のように書かれています。 （略）Webpackの主要な目的は「アプリのよ
Visiteurs depuis le 26/01/2019 : 5448 Connectés : 1 Record de connectés : 15 Download free mtf xoxo vo.2 font, view its character map and generate text-based images or logos with mtf xoxo vo.2 font online. Fonts Dinosaur Icons font download for free, in ttf for windows and mac! Fonts Dinosaur Icons in Fancy category. MTF Xoxo Vo.2 Download. DTCRoughM06 Download. Gondrong Download. Please enter you
One of the outcomes of the release of Core Web Vitals (and subsequent inclusion in Google's page ranking algorithm) is that we have been paying more attention to unexpected layout shifts and the cumulative layout shift (CLS) score. Some sources of layout shifts have been simple to resolve: pre-allocate the correct space for dynamic elements, use width and height attributes on images and prioritise
M+ FONTS | JAPANESE
MULTISTYLE 和文フォントでは、直線処理と柔らかな曲線の対比が特徴的な M+ Type-1 と、従来的なゴシック体の雰囲気を残しつつ現代的な表情も併せ持つ M+ Type-2 の 2 種類のかな文字に、共通の漢字を組み合わせています。 ああ 欧文フォントでは、明るく伸びやかなデザインを心がけた M+ P と、文字組みの時のまとまりの良さを意識して再設計された M+ C 、プログラミング用として識別性を重視しつつ素直な字形を目指した半角固定幅の M+ M があり、それぞれ2 種類の和文フォントに対応した Type-1 と Type-2 のバリエーションがあります。 GO GO 1Il|O0 AaBbCc プログラミング用フォントの新しいデザイン性を意識した M+ MN も用意しました。 1Il|O0 AaBbCc @$&~* FONT FILES M+ P Type-1 全角固定幅和
Comment écrire du Javascript dans Rails 6 | Webpacker, Yarn et Sprockets
Comment écrire du Javascript dans Rails 6 | Webpacker, Yarn et Sprockets Webpacker Vous sentez-vous perdu avec tous les changements liés aux actifs et au Javascript ? Npm, Babel, ES6, Yarn, Webpack, Webpacker, Sprockets, tout cela vous semble-t-il complètement étranger ? Si vous avez besoin d'un topo rapide et facile à comprendre sur la façon dont tout cet écosystème Javascript fonctionne dans une
WordPress最初から入っているプラグインは必要？WP Multibyte Patchがない - 専業主婦の生活ブログ
危うく見過ごすところでした！ WordPressをインストールすると、 最初から入っているプラグインがあります。 これは必要なのか？ PCが苦手な専業主婦は検索しまくります。 しかし、検索上位から順に確認していく中で、 最初から入っているプラグインで、 「WP Multibyte Patch」とやらを有効化した方が良い！ となっているのに、 私のWordPressには、WP Multibyte Patchがないのです。 WordPressがバージョンアップしたから、 必要ないのかと思っていたら、違った！ そこで今回は、 WordPressがバージョンアップしてからの、 最初から入っているプラグインの必要性と対応！ そして、WP Multibyte Patchについてまとめました。 WordPress最初から入っているプラグイン WordPress最初から入っているプラグイン WordPre
systemfontstack
System font stack Webfonts were great when most computers only had a handful of good fonts pre-installed. Thanks to font creation and buying by Apple, Microsoft, Google, and other folks, most computers have good—no, great—fonts installed, and they're a great option if you want to not load a separate font.
Coding with Character If you spend all day looking at code, letters, and characters—why not make it fun? Published: 27 Jul 2021 Topics: Typography, Technology, Work TL;DR: Monospaced fonts are no longer just utilitarian tools—they can also be playful & fun The Beginning of My Mono Mania There is something quirky, mechanical, and utilitarian about monospaced typefaces and I’ve admired them for year
WordPress 6.0 をチェックしています
WordPress6.0 RC1 が 公開されました。 WordPress6.0 は 2022年5月24日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress6.0 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 6.0 Development Cycle に載っています。 WordPress 6.0 Beta1 https://wordpress.org/news/2022/04/wordpress-6-0-beta-1/ WordPress 6.0 Beta2 https://wordpress.org/news/2022/04/wordpress-6-0-beta-2/ WordPress
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!
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
Matt Hobbs (@TheRealNooshu) is Head of Frontend Development at the Government Digital Service (GDS), a unit of the Government of the United Kingdom's Cabinet Office tasked with transforming the provision of online public services. An experienced frontend developer, he is passionate about using his skills to build accessible and performant user interfaces. He makes a point of keeping on top of the
Time to First Byte: What It Is and Why It Matters – CSS Wizardry – Web Performance Optimisation
8 August, 2019 Time to First Byte: What It Is and Why It Matters Written by Harry Roberts on CSS Wizardry. Table of Contents What is TTFB? Demystifying TTFB I’m working on a client project at the moment and, as they’re an ecommerce site, there are a lot of facets of performance I’m keen to look into for them: load times are a good start, start render is key for customers who want to see informatio
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです
Webフォント読み込み戦略（2021年） - MOL
What is black and white and read all over?
Puppeteer で静的サイトの Font Subsetting | blog.jxck.io
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
WebフォントはGDPRに抵触？WordPress.orgが書き換えを呼びかけ
Webフォントを使う時はbold時のfont-weightを読み込んだ上で扱う - Qiita
Speed Up Google Fonts – CSS Wizardry
Bunny Fonts | Explore Faster & GDPR friendly Fonts
vuejsもreactjsも使わないchrome拡張機能の作り方 - utamaro’s blog
Performant Front-end Architecture | DebugBear
JavaScript Performance in the Wild 2020 | CatchJS
5 steps to faster web fonts /// Iain Bean
Download Mtf Xoxo Vo.2 Font For Mac
How to avoid layout shifts caused by web fonts
Coding with Character | From the Desk of Doug Wilson
A font-display setting for slow connections
Reading a WebPageTest Waterfall Chart