The importance of `@font-face` source order when used with preload - Matt Hobbs
First published: Jan 23, 2021 Last updated: Jan 29, 2021 Tagged: webperf, webpagetest, ramblings. Matt Hobbs Read time: 17 mins 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 (it’s amazing what I do for fun in lockdown huh!). The WPT run returned something curious: The above waterfall was
Optimize WebFont loading and rendering Stay organized with collections Save and categorize content based on your preferences. 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 wi
今回は1,000以上確認したWebサイトの中から、特に良く使われているGoogle Fontsを紹介します。フォントを使っているサイトも一緒に紹介しているので参考にしてみてください。 前提条件は以下です。 日本語と英語を両方使っているサイトで確認。良く使われるNoto Sans JPとNoto Serif JPは除く Webサイトで良く使われるGoogle Fonts 無料で利用できるGoogle Fonts。選べるフォントの種類や太さも多く、さらに高速表示に対応しているため利用しているWebサイトはとても多い。 Poppins … 7票 大文字と太文字で使われてることが多い印象。コーポレートサイトからデザイン系サイトまで幅広く使われている。 セクションとグローバルメニュー部分で使われている。全部大文字、太字で使用している。 sanwacompany ltd. セクションとグローバルメニュ
What's New In DevTools (Chrome 105) | Blog | Chrome for Developers
Step-by-step replay in the Recorder You can now set a breakpoint and replay a user flow step by step in the Recorder panel. To set a breakpoint, click on the blue dot next to a step. Replay your user flow, the replay will pause before executing the step. From here, you can continue the replay, execute a step, or cancel the replay. With this feature, you can fully visualize and debug your user flow
Reduce web font size Stay organized with collections Save and categorize content based on your preferences. 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. Web
昔は記事が少なかったけど、最近は増えてきたので簡単に言っておきます。 それは、 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
JSer.info #502 - TypeScript 4.0が正式にリリースされました。 Announcing TypeScript 4.0 | TypeScript Variadic Tuple Types、Labeled Tuple Elements、Class Propertyの型がConstructorから推論されるようになるなどの型機能の改善がされています。 また、ES2021で入る予定のLogical Operators and Assignment Expressionsがサポートされています。 その他にはcatch節のデフォルトがunknownとなるように変更され、jsxFragmentFactoryオプションのサポート、--incrementalと--noEmitの組み合わせをサポートが追加されています。 Babel、PreitterはTypeScript 4.0に対応
プログラミング向きな等幅フォントBerkeley Monoを購入した、めっちゃ良いのでおすすめです - Lambdaカクテル
Berkeley Monoというフォントがある。 berkeleygraphics.com プログラミングなどに使える有償フォントで、個人向けライセンスを購入すると75ドルで永年アップデート特典が得られる。 Berkeley Monoっていうフォントを大枚はたいて購入したんだけどマジで最高なのでみんな買ってほしい。 pic.twitter.com/vaUsRB8PW2— Windymelt #RubyKaigi2022 (@windymelt) 2022年8月17日 このスクショ中のリガチャ機能はこのフォントのものではないので注意 以前にTwitterの広告かなにかで見て気になっていたのだけれど、直感的にかなり良さそうと感じたのと、色々なツボ(0の中心はナカグロになっているとか)を押さえてくれていたので買う決心をして今に至る。 よいところ 他の等幅フォントと比べると、やや横にしっかり太さが
日本語webフォントを使うにあたっての所感
普段、クライアントワークから自主制作まで制作において日本語のwebフォントを使うということがよくある。その際に、なるべく豊かな表現をしたいと思う。けれどもなかなかうまくいかない。それはなぜだろうか。各サービスの内部では、議論が行われていて日々改善がなされているのだと思う。 そういった循環の中で、1人のユーザーとしての考えを書くことで貢献できればと思う。 なるべく公共的な議論になるように心がけるが、内容はあくまでも個人的な所感として書いていく。（１ユーザーのサンプルとしても読んでもらえると思う）デザイナーやエンジニア向けの記事というよりは、趣旨としては長年日本語webフォントを使ってきた1ユーザーによる配信サービスやファウンダリに向けた感想という感じだろうか。 まずは、先人たちの努力によって数々の日本語のwebフォントの配信サービスが生まれて運営されてその上で、かつてはweb上では見ることが
Incremental Font Transfer
Incremental Font Transfer W3C Working Draft, 9 July 2024 More details about this document This version: https://www.w3.org/TR/2024/WD-IFT-20240709/ 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 …” (archives) G
Free SVG, JavaScript & Webfont Icons with Components for Angular, React.js, and Vue.js Premium designed free icon set with marks in SVG, JavaScript, and Webfont formats. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.
Analyzing Solorigate, the compromised DLL file that started a sophisticated cyberattack, and how Microsoft Defender helps protect customers | Microsoft Security Blog
UPDATE: Microsoft continues to work with partners and customers to expand our knowledge of the threat actor behind the nation-state cyberattacks that compromised the supply chain of SolarWinds and impacted multiple other organizations. Microsoft previously used ‘Solorigate’ as the primary designation for the actor, but moving forward, we want to place appropriate focus on the actors behind the sop
【2018.10.28 追記】ブックマークレット追加 2019.3.16 追記 すみません、このページはスマホには対応してません...(;'∀') 下記のWebフォントの設定がPC向けも含め最適ではないかとと考えてます。 モナー等のAAをずれずに表示するためのWebフォント設定 - Qiita 拙作めも : はてなブログでスマホでのAA（アスキーアート）表示のためにWebフォントを設定 タイトルそのまんまですけども... INDEX エトセトラ JavaScript 表示テスト ブックマークレット スクリーンショット - Microsoft Edge スクリーンショット - Firefox エトセトラ 対応フォントを入れてもページ作成者が指定してしてくれないと意味がないわけなのですが、その辺にウンチクについては以前に書いてたりしました。 拙作めも : 【AA】アスキーアート表示について【フ
Museo™ Sans 100 - Fonts.comBuy Museo Sans 100 desktop font from exljbris on Fonts.com. Museo Sans Rounded 100 - Fonts.comBuy Museo Sans Rounded 100 desktop font from exljbris on Fonts.com. Museo™ Sans 100 Font - Licensing Options | Linotype.comMuseo Sans is a full-featured, highly legible sans serif font family designed by Jos Buivenga. Museo Sans sports a familiar look and is based on the popular
Sigmar One - Google Fonts
Sigmar is a casual, display specific webfont. It's design is based upon various fonts found in mid twentieth century pulp magazine advertising.
CLOG
GitHub にてデザインの見直しを続けている M+ FONTS の正式公開前の暫定版として、Mplus 1 と Mplus 2 フォントを公開しました。 大胆な直線処理を特徴としつつも柔らかな印象の Mplus 1、手の動きを残すことでややクラシカルな表情を持つ Mplus 2。どちらも、いわゆるモダンゴシックフォントの新しいスタンダードを目標として再デザインしました。漢字については従来のデザインをそのまま流用しています。 上下のサンプル画像は、ポインターを乗せることで Mplus 1 と Mplus 2 が切り替わります。またご覧いただいているこの文章でも webfont として使用しています。画面左上にある「CHANGE FONT TO」の下のボタンを押すことで、web ページ全体のフォントを変更することができます。 これらのフォントには GF Latin Plus 欧文文字セットと
The best website for free high-quality Animatron fonts, and ➔ 11 professional Animatron fonts for the best price on the Web. 0 Free Animatron FontsFont Awesome Animation - GitHub PagesFont Awesome Animation. Simple animations using FontAwesome and some CSS3. Getting started Usage. Designed and built with by Louis LIN ... SF Animatron Fonts | FontspringSF Animatron, font by ShyFoundry. SF Animatron
These caracteristics shape it into a glamourous display font primarily used for titles and large typography settings. Voga was inspired by iconic typefaces such as Bodoni and Didot. It has an extensive glyph set that supports languages for the Americas and most of Europe. Voga - Webfont & Desktop font « MyFontsVoga is a condensed modern Didone typeface with three weights: Regular, medium and bold.
ブログのfont-family決定版
はじめにブログのfont-family決定版です。下記の長い長い調査結果を踏まえた最終案です。 font-familyを調べまわった結果のまとめfont-familyのソースコード用等幅フォント設定有名サイトのfont-familyを調べてみた※ブログの設定変更時に加筆修正予定です 最終更新日：2021年01月21日（CSS変更を含む） 結果筆者環境では、上記のように「Verdana」「BIZ UDゴシック」が適用されています。 通常フォントfont-familybody { font-weight: normal; font-family: -apple-system, BlinkMacSystemFont, Verdana, arial, 'HiraKakuProN-W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDGo
LT2 Stencil is an all-caps typeface with multiple alternate characters. First drawn for a special issue of The New York Times Magazine in 2019 the typeface has been extensively reworked for release in 2022. Each license includes 4 weights (S, M, L and XL) for use at different sizes. The typeface will be available throughout March with 100% of profits going to the UN High Commissioner for Refugees
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. This time it’s all about CSS Generators: from CSS shadows to easing gradients to CSS overlays to CSS doodles. Last week, we looked at CSS Auditing tools, and this week around we’ll be looking at useful generators for everything CSS: from gradients to drop-shadows and bezier curves to
Electronでさっと作るTODOアプリ | Log:Code
前書き Vue + Webpack + Electron を使うと、ちょっとしたGUIツールを手っ取り早く作成することができて便利です 一昔前はGUIツールを作ろうと思うと、C言語で Win32API を使ったり Gtk を使ったりなど、結構面倒なプログラミングが必要でした しかし、WEB技術の発展（というより JavaScript の発展）に伴って、ローカルGUIアプリケーションもWEB技術の応用で作成できるようになってきました 本稿では、WEB技術を使ったクロスプラットフォームアプリケーション制作の入門として Trello 風の TODO アプリを作成していくことにします Gitリポジトリ: https://github.com/amenoyoya/task-admin 対象読者 あったら便利なツールのアイディアはあるけれど、GUIツールの作成に二の足を踏んでいる方 WEBフロントエン
最近のSEOのトレンドとして、「コンテンツの充実」と「ページスピード」が重要となっています。 「内容が薄い記事は見たくない」 「ページの表示が遅いと見るのを止める」 当然の流れと言えば当然ですが、これを機械的に判定できるようになってきているこの時代・Google、すごいですね。 ということで、WPで作った当ブログもGoogleが提供しているPageSpeed Insightsでスピードをチェックしました。 30点。 むむむ。 結論。 いろいろ調べて、いろいろやってみた結果、大事なことは以下の2つ。 ①画像の保存形式・圧縮 ②外部ファイルをfooterで読み込む この2点を中心に改善し再チェック。 90点！ ここまでの道のりを紹介します。 目次01. 画像を圧縮する02. JS・jQueryをフッターで読み込むさらに、WPで出力されるjquery.jsもフッターで読み込む03. ファーストビ
$ docker build -t djample-base . Sending build context to Docker daemon 49.51MB Step 1/4 : FROM ubuntu:18.04 AS djample-base ---> 74f8760a2a8b Step 2/4 : RUN useradd www --create-home --shell /bin/bash ---> Using cache ---> 536f8417ec7c Step 3/4 : WORKDIR /home/www ---> Using cache ---> fc05ab643d75 Step 4/4 : RUN set -x; apt-get update -y && apt-get install -y cron && apt-get install -y python3.6
反省しなきゃいけないんだけど、ちょっと小金が入ったとはいえ、また前にもしたような迂愚な行いで、発売記念バーゲンセール75％OFFのFutura Nowをついつい衝動買い……Monotype使い放題を契約しているのでこれに関していえば本当に無駄遣い。まぁ、なんというか何やってんだろう……少し計画的に収入支出を考えないと、お金なんて出ていくばっかりなんだから……ホント、ちゃんとしないと……イヤ、なんか、それ以前に酔ってるときは気をつけないと……さて、まぁ、そんな感じなので今回は脳内の予定を変更して急拠Futuraの話をしよう。ところで国語審議会と新聞なんかの所為で急拠って書いてしまっているけど言葉の意味からいっても本来これは大間違いで急遽って書かないといけないんだけれど……その話は……まぁどうでもいいか。 さて、とは言ってもPaul Rennerによって設計され1927年にリリースされたこのジ
Speed Needs Design, or: You can’t delight users you’ve annoyed
Speed Needs Design, or: You can’t delight users you’ve annoyed To really sell streamed HTML’s impact, I should have shown the existing site’s design, but with streaming’s speed. The demo’s design deviations Unfortunately, it was impossible to have the existing design and the speed I needed. This post is about some of the differences. If I were a good scientist, I’d have before/after traces for eac
ブログ初心者 「Fontawesomeを使ってみたいけど、なんか注意点とかありますか？ 使わないほうがいいっていう意見もあるし、表示速度は落としたくない。 どうしたらいいか教えてほしいな。」 こんなお悩みにお答えします。 この記事でわかること Fontawesomeは使わないほうがいい話 Fontawesomeを使わないでアイコンを使う方法 こんにちわ、紅蓮です。 ブログをしていてアイコンを使いたいとき、「Fontawesomeを使おう」なんて自動で決めていませんか？ 今回は、Fontawesomeは使わないほうがいい話をご紹介していきましょう。 この記事を読めばFontawesomeを使わないほうがいい理由や、代わりにどんなことをすべきかがばっちりわかります。 この記事を書く僕は、ブログ運営歴は3年目。 現在はアフィリエイトからの収益が、毎月3,000円ほど入ってきています。 そんな僕も
urlscan.io - urlscan.io
499 Outgoing links These are links going to different origins than the main page. For each link, only the first name is shown. https://pro.urlscan.io/result/852be7e4-3378-4e8c-9bb3-e354b60164e3/ Title: urlscan Pro https://www.virustotal.com/#/domain/williamgalbra547595.bloggersdelight.dk Title: VirusTotal (Domain) https://securitytrails.com/domain/williamgalbra547595.bloggersdelight.dk/dns Title:
@font-face is very easy to use, click here to download Architects Daughter webfont kit. The following example will guide you to the css and html codes. The following example will guide you to the css and html codes. The best website for free high-quality Architect fonts, with 35 free Architect fonts for immediate download, and ➔ 77 professional Architect fonts for the best price on the Web. 35 Fre
3rem以上のｸｿﾃﾞｶフォントサイズなら指定なし・游明朝でもOK 文章に使うならフォントのファイルサイズがデカすぎるからサブセット化推奨 ここの文字がAndroid環境で英字だけ細くなってるのはbootstrapがフォントファミリ指定してるせいでwebfont関係ないです Google Fonts + 日本語 早期アクセス font-family: serif; 指定なし明朝。 font-family: "Yu Mincho"; windows8以上向け 游明朝。 font-family: "Hannari"; GoogleFont はんなり明朝。 font-family: "Sawarabi Mincho"; GoogleFont さわらび明朝。漢字もあり。 バニラAndroidは明朝フォント入ってない = webフォント使わないとゴシックになる = 現状、明朝体使いたかったらwebフ
Chrome やその他のブラウザでは .otf や .ttf であれば、フォントファイルと CSS の記述で表示されますが、IE だけは専用のフォントファイルが必要です。 .eot という形式のフォントファイルを別に用意しておく必要があります。 今回は、WOFFコンバータという通常のフォントファイルを eot に変換してくれるフリーソフトを使用しています。 woff / eot ファイルに変換してくれるソフト WOFFコンバータ eot ファイルに変換したら、otf フォントなどと一緒にサーバーにアップします。 サーバーにアップしたら、CSS で下記のように記述します。 style.css @font-face { font-family: "sample-font"; src: url("./../fonts/sample-font.eot"); src: url("./../fonts
Webfontの使い方 - Qiita
Webフォントを使うためのベストプラクティス（最もパフォーマンスがよい、遅延が少ない）をGoogle Fontsの利用を中心に考えてみたいと思います。 形式 EOT・TTF・WOFF・WOFF2・SVG等ありますが、2019年12月現在、ほとんどのブラウザでWOFFとWOFF2がサポートされていますので、この2つを読み込めばOKです。 ※但し、案件ごとのターゲットブラウザは確認しましょう。 Google FontsのCDN利用 Google Fontsをタグで読み込んで使う場合、複数フォントを読み込むと以下のようなタグが発行されます。 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Roboto:400,700&display=swap&subset=japanese" rel="styles
株式会社モリサワとエックスサーバー株式会社（代表取締役：小林尚希、本社：大阪市北区、以下エックスサーバー）は、2019年8月19日（月）よりエックスサーバーが提供するWebフォント機能に「みんなの推しフォント総選挙」の投票結果の上位3フォントを追加しました。 追加されたフォントは、「秀英にじみ丸ゴシック」「さくらぎ蛍雪」「しまなみ」です。 フォント追加の対象となるサービス ・エックスサーバー ・エックスサーバービジネス ・wpX ・シックスコア ・X2 「みんなの推しフォント総選挙」結果概要 投票期間：2019年7月1日（月）〜31日（水） 投票上位3フォント： 1位 秀英にじみ丸ゴシック 2位 さくらぎ蛍雪 3位 しまなみ 当選発表： プレゼントの当選者には、投票時にご登録頂いたメールアドレス宛に、8月19日（月）より順次ご連絡いたします。 ※当選通知後、7日以内の返答が無い場合は、当選
Webフォントでウェブサイトをもっと魅力的に
近年、Google Fonts（グーグルフォント）＜無料＞で日本語フォントが増えて以来、Webフォントは、サイト制作に欠かせない要素となりました。 https://fonts.google.com/ そこで、今回はGoogle Fontsの使い方と、さらにウェブサイトでフォントを自由に使いたい方向けのサービスを紹介します。 Webフォントとは？Google Fontsでフォントを選ぶGoogle Fonts使用法と注意点更なる軽量化を目指すならまだあまり、普及していませんが 1.Webフォントとは まず、最初にWebフォントについてご説明します。 現在、Webサイトで表示できるテキストは大きく分けて2つあります。 デバイスフォントとWebフォントです。 デバイスフォントはそれぞれのユーザーの閲覧環境（デバイスにインストールされているフォント）に依存するため、環境によってフォント表示のされ方
こんにちは、@kaa_a_zu です。Zennにおける処女作であるこの記事では、スタイルをCSSファイルとして定義し読み込むのではなく、インライン化することが何故パフォーマンスに影響を及ぼすのか、またインライン化を行うときに何に注意をしないといけないのかについて書こうと思う。 インラインCSS の効果 まず、「CSSをインライン化することでパフォーマンスが改善される」ことが分かる事象について紹介する。 Next.js の automatic-webfont-optimization Reactのフレームワークである Next.js v10.2 で導入された automatic-webfont-optimization が機能したことで、WebFontを利用しているサイトでは、以下のようなパフォーマンス改善が(ほぼ)起こる (※LightHouseでのスコアが全てではないが、パフォーマンスが
こんにちは、フリーランスエンジニアのしょーご(@samuraibrass)です。 今回は「Google Fontsの使い方」をNoto Sans JPを例に解説していきます。
デザインにマッチした数字フォントが見つからない！そう思ったときに役立つ数字がきれいなフォントを紹介します！ こんにちは！広告会社でデザイナーをしている、かじゅうです！ web広告の制作案件では、料金や価格などのプライスデザインを作る機会がめちゃくちゃ多い！でも、デザインする時に『どのフォントがいいだろう？』と迷うことがあります。 大量のフォントの中から、デザインにマッチしたフォントを探すのは結構時間がかかります。気づいたらフォント探しに時間がかかりすぎた…なんてことも ということでこの記事では、 料金や価格のデザイン表現にピッタリな数字フォントを10種選出！ 数字の文字組の例も交えて紹介します！ 【無料でも使える！】Adobe Fontsの登録～使い方とおすすめのフォントを紹介Adobe Fonts（アドビフォント）の登録方法や使い方、おすすめのフォントについて詳しく紹介します。無料でも使
Font-Awesome 5を使うときのPageSpeed Insights「ウェブフォント読み込み中の全テキストの表示」対策 | QWERTY.WORK
後日再発 解決したつもりが後日またPageSpeed Insightsで「ウェブフォント読み込み中の全テキストの表示」について警告が出ました。 all.cssを改造して読込 Font-Awesome 5 の all.css をCDNからの読み込みではなくローカルに置き、一部を以下のように変更しました。all.cssの最下位部分にあります。2パターンで試したところ、どちらでも警告が出ないようになりました。 パターン1 font-display: Auto;をswapに変更し、意味はわかりませんがlocal("@")を挿入し、urlはCDNのパスに変更してしています。 @font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal; font-display: swap; sr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Optimize WebFont loading and rendering | Articles | web.dev
Webサイトで使われるフォント厳選16個 - Google Fonts 編
Reduce web font size | Articles | web.dev
「ウェブフォント読み込み中のテキストの表示」は無視してOK！？
2020-08-25のJS: TypeScript 4.0、Cypress 5.0、Electron 10.0
Open Source SVG, JavaScript & Webfont Icons with components for Angular, React.js, and Vue.js · CoreUI
【AA】アスキーアート表示対応フォントの表示テスト - palm84.com
Museo Sans 100 Font Download - lasopajt
Sf Animatron Font - televisionlasopa
Voga Medium Font Download - survivallasopa
LT2 Stencil Typeface for Ukraine - Matt Willey
https://orderlasopa367.weebly.com/hk-nova-medium-webfont.html
CSS Generators — Smashing Magazine
【WP高速化】PageSpeed Insightsで90点取るまでに改善したこと | yama-design
Django を ECS(Fargate) に手動デプロイしたログ
Futura Nowとオプティカルサイズについて｜hide
Fontawesomeは使わないほうがいい話【初心者向け】 - 紅蓮ブログ
Architects Daughter Font - lasopametal
Windows10とAndroidの明朝体フォント確認用ページ
IEでWebフォントを表示させる | demodemo - Webデザイン/アプリ開発/フロトエンド開発のスキルデモ
「みんなの推しフォント総選挙」結果発表およびエックスサーバー提供のWebフォント機能に3フォントを追加
【パフォーマンス】Next.js から学ぶCSSのインライン化
https://findlasopa307.weebly.com/hk-nova-medium-webfont.html
Google FontsのNoto Sans JPの使い方【反映されないを解決します】｜しょーごログ
プライスデザインに使える！『おすすめ数字フォント』10選【デザイン例も紹介】