WEBフォントの使用で知っておきたい3つの基本
WEBフォントは、フリーフォントをサーバーにアップロードしてWEBフォントとして使うこともできます。 今回は、WEBフォントの使用で知っておきたい3つの基本についてご紹介します。 WEBフォントの値の指定 WEBフォントはCSS3から導入された仕様で、テキストの表示にインターネット上のフォントを適用することを可能にします。 @font-face規則 @font-face規則は、WEBフォントの利用を指定する規則で任意のフォント名を指定します。 font-family、fontプロパティを使うときに、この値を指定すると、@font-face規則で指定したWEBフォントで表示されます。 CSS @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff
2018年9月に、Google Fontsの多くの日本語フォントが早期アクセスという扱いから正式版になりましたが、興味深い工夫がされています。 ※ スライス + HTTP/2配信は欧文フォントでされていました。 フォントファイルを120個に分割 Noto Sans JP用のCSSソースコードを見ると、woff2ファイルが120ファイルにスライスされ、120個の@font-faceからそれを参照しています。 /* [0] */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url(https://fonts.gstatic.co
webページ制作時に、webフォントの文字がブラウザによって文字がかすれたりにじむという現象に遭遇したことはないでしょうか？ macのChromeで見たら問題なかったのに、WindowsのChromeやEdgeで見るとなぜか文字がにじむ現象が起きた！ ↓こんな感じで文字がにじんで、ところどころ色が濃く出ております ↓こちらが正常な状態 少しわかりづらいので拡大バージョンをどうぞ なんかギザギザしてて汚い… なめらかできれい（通常） 伝わりますでしょうか？ （スクショだとこれ以上解像度が上がらないのでわかりにくいかもですが…） にじんでいる方は全体的に色の強弱が強くなってバランスが悪くなっています。 今回の画像の使用フォントはモリサワの「秀英丸ゴシック」です。 柔らかくて温かい印象の素敵なフォントですが、にじんだら台無しです（；；） でも安心してください！ cssでtransformを追加す
ブログのフォントをWindowsにもMacにもインストールされている游ゴシックに変えてみた | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
このblogは2年前の3月から書いていますが、当初に設定して以来font-familyを変更していませんでした。当時としてはこれがベスト！と思われる設定でした。 先日、WindowsにもMacにもインストールされている游ゴシックというフォントがあることに気づきましたのでそろそろfont-familyも変えてみようということで変更してみました。 font-familyで指定したフォントは各PCに入っているフォント 今（原稿を書いている）現在、このblogのfont-familyは [ryus_blogcard url=”https://usortblog.com//twentyfourteenfont/”] で指定したままとなっています。つまり、 font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN
ディレクターさん、デザイナーさんから指定されたフォントを埋め込みしたけど反映されない、、、 そんなエラーに悩まされたこと、ありませんか？ この記事では、よくあるエラーを2つ紹介して、対策までご紹介していきます。 さっそく見ていきましょう！ ①半角文字が全角になっている slackなどのチャットアプリを使って埋め込みコードを渡すと、文字列をコピーするときに全角になってしまいます。 以下はslackからコピペしたコードです。(コピペしてみると『’』が全角の『’』になっています) /* slackからコピペしたコード */</code> <script> (function(d) { var config = { kitId: '〇〇〇〇〇〇〇', <code><span style="color: var(--hcb-color--text,#1f1e1e); font-family: var
Vue+Firebaseで作ったフロントエンドアプリのバンドルサイズを削減する – rinoguchi's techlog
Vue+Typescript+FirebaseでChrome拡張を作っているのですが、バンドルサイズが大きいよと警告が出たので対応しようと思います。 使っている技術 Chrome Extension Vue+Vuetify TypeScript Firebase Authentication Cloud Firestore ワーニングの内容 npm run build（cross-env NODE_ENV=production webpack --hide-modules）で本番用のコードを出力してみたところ、バンドルサイズが推奨サイズ（244 KB）を超えているというワーニングが出ました。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). Thi
こんにちは！エンジニアのsuganoです。 コーダーはデザインカンプをもとにコーディング作業をします。 カンプ上では上手く表現できるものを、WEBサイト上では上手く表示出来ないことがしばしばあります。 そこで私がコーディングしていく中で、こういう現象あったなというのを一つご紹介したいと思います。 コーディング中にfont-familyで特定のフォントを使用して 自分のPCでは問題なく表示されているのに、別のPCで確認すると 意図しないフォントに置き換わってしまったりするなど、ありませんか？ なぜこういう現象が起きてしまったのかということと、それの対処方法についてまとめたいと思います。 アウトライン化とは何か 通常、WEBサイトで表示されるテキストは ユーザーのPCやSPにインストールされたものを使って表示させます。 つまり、環境にないフォントはデフォルトフォントに置き換えられてしまうそうで
ウェブフォントを最適化する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 前のモジュールでは、HTML、CSS、JavaScript、メディア リソースを最適化する方法について学習しました。このモジュールでは、ウェブフォントを最適化する方法について学習します。 ウェブフォントは、読み込み時間とレンダリング時間の両方でページのパフォーマンスに影響を与える可能性があります。サイズの大きいフォント ファイルはダウンロードに時間がかかり、First Contentful Paint（FCP）に悪影響を及ぼす可能性があります。一方、誤った font-display 値が原因で、ページの Cumulative Layout Shift（CLS）の原因となる望ましくないレイアウト シフトが発生する可能性があります。 ウェブフォントを最適化する前に、ブラウザによってウェ
この記事は 2024 年 2 月 10 日に投稿しました。 目次 はじめに Vuetify3 でツールバーの左側にハンバーガーメニューアイコンを表示する おわりに リンク 1. はじめに こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。 今回は業務で使用しているVuetify3でツールバーの左側にハンバーガーメニューアイコンを表示する方法についてです。 目次へ 2. Vuetify3でツールバーの左側にハンバーガーメニューアイコンを表示する Vuetify3でツールバーの左側にハンバーガーメニューアイコンを表示するには、以下のような実装にします。 実装例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devic
Webフォントをサブセット化してセルフホスティングする際の注意点 フォントをサブセット化してセルフホスティングする事はフォントデータの改変・再配布になる可能性があるので、使用したいフォントのライセンスを確認してください。 今回はSILオープンフォントライセンスで利用・改変・再配布OKのGoogle fontsのNoto Sans Japaneseを使用します。 Google fontsのサイトから直接フォントデータをダウンロードしてサブセット化する事もできますが、フォントの見た目が少し変わってしまう場合があるので、フォントの見た目が変わらない方法でご紹介します。 ①フォントのダウンロード まずは「google-webfonts-helper」サイトから必要なフォントを検索してファイルをダウンロードします。 https://gwfh.mranftl.com/fonts 「1. Select
こんにちは。マークアップエンジニアのヤナダ（@yanada_front）です。 Web制作の初心者向けに「HTML・CSSを丁寧に解説した教材」は数多くあります。しかし、「フォントについて解説した教材」はそれほど多くないように思います。かくいう私も、実際に案件を取った後に、フォントでつまずいた一人です。 このページでは、駆け出しエンジニアの方が、実際の案件を取ったときにつまずかないよう、最低限必要な「フォント」の知識をご説明いたします。 1. 対象読者Photoshop のデザインカンプを渡されて、コーディングを実施する人 ・デザインも自分で行う場合 ・WordPress でテーマを利用する場合 などは、今回は対象外です。 2. Photoshop と フォント貰ったデザインカンプ（Photoshop）には、コーダーの作業環境にないフォントが含まれていることがあります。 ・Adobe 製品
ウェブサイト構築の際にGoogle Fontsなどのウェブフォントを使用すれば、各ユーザーの環境によらず同一のフォントを表示させることが可能です。この際に行う通信について、トラッキングを一切行わないことが明示されたウェブフォントプラットフォームが「Bunny Fonts」です。 Bunny Fonts | Explore Faster & GDPR friendly Fonts https://fonts.bunny.net/ Bunny Fontsは、プライバシーを第一に設計されたオープンソースのウェブフォントプラットフォームです。ゼロトラッキングとノーログポリシーにより、欧州連合(EU)が個人データ保護やその取扱について定めた一般データ保護規則(GDPR)に完全に準拠し、ユーザーの個人データをユーザー自身で管理できるとのこと。さらに、bunny.netのグローバルCDNにより光速のロー
webfontは使いたいけど重くて使いづらい。そんな悩みを解決するWebFontLoader - Qiita
はじめに LPやWeb制作を行う上で大事なフォント。高級感のあるフォント、信頼感をイメージ付けるフォントなど、そのサイトのイメージにあったフォントを選ぶことでユーザーに与える印象は大きく変わります。 そこでよく使われるのがGoogle Fontsです。無料で使える上に、導入がとても簡単なのがいいですよね。でもGoogle Fontsのデメリットはなんといっても重い、つまり表示に時間がかかってサイトの読み込みに影響が出てしまうこと。 そんなGoogle Fontsを非同期で読み込んでサイトの読み込みスピードを上げる方法を書いていきたいと思います。 通常のGoogle Fontsの使い方 通常はGoogle Fontsにアクセスして読み込みパスを取得、使いたいサイトのhtml、もしくはcss内に追記して使います。 Robotoの場合 Google Fontsでよく使われているRobotoを使用
Web フォントを非同期で読み込んで、Web フォントのダウンロード中に固まらないようにしてみた。 https://github.com/typekit/webfontloader JavaScript を非同期でロード 2019-11-16 時点で最新版は 1.6.28 だが、Google Hosted Libraries では 1.6.26 <head> <!-- いろいろ --> <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" async></script> <!-- いろいろ --> </head> 読み込みたい Web フォントの指定、および読み込み済みかどうかの確認 sessionStorage.fonts = true; でフラグ立てて、フラグ立ってたら wf-acti
CSSでWebフォントを使う方法【@font-faceの使い方】
今回はCSSの@font-faceを使ってローカルにダウンロードしたWebフォントを使う方法を解説します。 @font-faceを使ってローカルのWebフォントを使う方法使い方はこんな感じです。 /* Webフォントを定義 */ @font-face { font-family: 'myfont'; /* フォント名 */ /* フォーマットごとにパスを指定 */ src: url('../fonts/myfont.ttf') format('truetype'); src: url('../fonts/myfont.woff') format('woff'); } /* @font-faceのfont-familyでつけた名前を指定 */ body { font-family: 'myfont', sans-serif; } urlはカンマ区切りでも指定できます。 src: url('.
最推しの和風ゲームが先日リプレイスし、 雰囲気のある楷書フォントからUDフォントに変更になって文句続出してたので、 改めてユニバーサルデザインとは？UDフォントとは？となりました。 ユニバーサルデザインとは ユニバーサルデザイン（Universal Design／UD）とは、文化・言語・国籍や年齢・性別などの違い、障害の有無や能力差などを問わずに利用できることを目指した建築（設備）・製品・情報などの設計（デザイン）のことである。 出典: フリー百科事典『ウィキペディア（Wikipedia）』 ロン・メイスの７つの原則 誰にとっても公平 自由で柔軟に使える 簡単・単純に使える 明確で認知しやすい 失敗しても安全 身体的な努力が少なく長く使える 誰にでも使える大きさと広さがある 製品やインフラ（ここまではバリアフリー）だけでなく、情報やコミュニケーションまで広くカバーする言葉。 モリサワのユニ
最推しの和風ゲームが先日リプレイスし、 雰囲気のある楷書フォントからUDフォントに変更になって文句続出してたので、 改めてユニバーサルデザインとは？UDフォントとは？となりました。 ユニバーサルデザインとは ユニバーサルデザイン（Universal Design／UD）とは、文化・言語・国籍や年齢・性別などの違い、障害の有無や能力差などを問わずに利用できることを目指した建築（設備）・製品・情報などの設計（デザイン）のことである。 出典: フリー百科事典『ウィキペディア（Wikipedia）』 ロン・メイスの７つの原則 誰にとっても公平 自由で柔軟に使える 簡単・単純に使える 明確で認知しやすい 失敗しても安全 身体的な努力が少なく長く使える 誰にでも使える大きさと広さがある 製品やインフラ（ここまではバリアフリー）だけでなく、情報やコミュニケーションまで広くカバーする言葉。 モリサワのユニ
ページ容量を増やさないために、不具合報告やコメントは、説明記事に記載いただけると助かります。 対象期間: 2020/01/13 ～ 2021/01/12, 総タグ数1: 45,560 総記事数2: 166,944, 総いいね数3: 2,326,183, 総フォロワー数4: 119,088 総合評価5: ((68.756 * 記事数) + (4.457 * いいね数) + (115.138 * フォロワー数))pt 総合順位;タグ名;記事数順位;いいね数順位;フォロワー数順位 1;Python;1;2;1 2;JavaScript;2;1;2 3;Ruby;4;5;7 4;Rails;3;4;16 5;PHP;8;12;12 6;AWS;5;7;30 7;初心者;6;3;61 8;Git;18;14;4 9;GitHub;26;19;3 10;Docker;7;6;28 11;Linux;1
Webフォントをサーバーにアップロードして読み込む方法
みなさんはWebフォントを利用していますでしょうか？ 外部から読み込むと、ページの読み込み速度を下げてしまう可能性があります。 当ブログではGoogle Fontsをサーバーにアップロード、使うものだけを限定して読み込んでいます。 今回はWebフォントをローカル(内部)にアップロードして読み込む方法を解説します。
Mac、Windows版があります。 フォントファイルをサブセット化する インストール後、サブセットフォントメーカー起動すると以下の画面が表示されます。 １．ダウンロードした源ノ角ゴシックのフォントファイルを指定します。 ２．作成後のフォントファイル名を任意で指定します。「SourceHanSans-Heavy_s.otf」としました。 ３．以下の非漢字文字（記号、ローマ字、カタカナ、ひらがな、記号）と第一水準漢字を「３の赤枠」に指定します。 、。，．：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼～∥｜…‥‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＋－±×÷＝≠＜＞≦≧∞∴♂♀°′″℃￥＄￠￡％＃＆＊＠§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡¶◯１２３４５６７８９ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶ
年末恒例・大sketchリポジトリ棚卸祭 - 私が歌川です
はじめに これは はてなエンジニア Advent Calendar 2022 6日目の記事です。昨日は id:momochi29 さんで「口癖を自動で検出する手法」でした。口癖って自分ではなかなか気づけないですよね。 tjmtmmnk.hatenablog.com アプリケーションエンジニアの id:utgwkk です。今年作ったsketchリポジトリについてお話ししようと思います。年末恒例というのはたった今考えました。 sketchリポジトリとは みなさまは、ちょっとしたコードを書いて実験したくなったことがありますか？ 私はそういったとき、GitHubに sketch-yyyymmdd-abcdefg のような日付入りの名前のリポジトリを作って実験に使ったコードをpushしておくことが多いです。そのようにして作られたリポジトリのことをsketchリポジトリと呼ぶことにします。 要するに、
そもそもWebフォントとは？ 通常Webサイトを閲覧する際、フォントはユーザーそれぞれの閲覧環境（PC、タブレット、スマホなど）に準備されているものの中から選択され表示されます。したがって、Webフォントがない時代は、テキスト（動的な文字）に使用するフォントの統一ができませんでした。 Webフォントがない時代 前述の通り、CMS・システムなどで更新する要素のテキストに対して任意のフォント利用が不可能。その結果、デザイナーが意図しない表示状態になることがあります。 苦肉の策として動的でない要所に対してのみ、文字の画像を利用することで、なんとか見た目上のデザイン性を保っていました。 現在の状況 現時点（2022年4月）では様々なデバイスがWebフォントに対応しているため、閲覧環境に左右されることなく、デザイン性を維持したまま気軽にテキストへ利用できます。しみじみ、良い時代になったと実感していま
フォントに関するおすすめの方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 この記事では、フォントのパフォーマンスに関するベスト プラクティスについて説明します。ウェブフォントはさまざまな形でパフォーマンスに影響します。 テキストの表示の遅延: ウェブフォントが読み込まれていない場合、ブラウザは通常、テキストの表示を遅らせます。多くの場合、これにより First Contentful Paint（FCP）が遅延します。これにより、状況によっては Largest Contentful Paint（LCP）が遅延することがあります。 レイアウト シフト: フォントを入れ替えるとレイアウト シフトが生じる可能性があり、Cumulative Layout Shift（CLS）に影響します。このようなレイアウト シフトは、ウェブフォントとその代替フォントがページ
☆100達成！PageSpeed Insightsのスコアアップ方法 その３：Autoptimizeを導入する 2021/07/09 2020/02/10SEOWordPress Google「PageSpeed Insights」のスコア（点数）をアップさせる方法 その『3』です！ 今回は『Autoptimize』を導入してスコアアップの対策を行います。 目次Google『PageSpeed Insights』でチェック『Autoptimize』を導入する『Autoptimize』の設定今回の結果「PageSpeed Insights」のスコアアップ方法一覧PS Insightsのスコアアップ方法 その１：画像の圧縮＆読込みを遅延させるPS Insightsのスコアアップ方法 その２：GoogleAdSenseの読込みを遅延させるPS Insightsのスコアアップ方法 その３：Auto
【2022年3月】Google Fontsのパフォーマンス比較＆ハリー・ロバーツ方式の勝手に改良版 | deep-space.blue
「普通に使う」とは Google Fonts で発行されるlink用のコードを使うことです。 2022年3月現在、GoogleFontsで発行されるlink用のコードはこんな感じ。 <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+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet"> ハリー・ロバーツ方式がよいかも webfont.jsを使えばいいじゃん？と思って調査
#Tags | blog.jxck.io
3pca 2023-12-30 3PCA 最終日: 3rd Party Cookie 亡き後の Web はどうなるか? 2023-12-29 3PCA 27 日目: FedCM 2023-12-28 3PCA 26 日目: Related Website Sets 2023-12-27 3PCA 25 日目: Measurement 2023-12-26 3PCA 24 日目: Retargeting 2023-12-25 3PCA 23 日目: Interest Based Advertising 2023-12-24 3PCA 22 日目: Privacy Sandbox 2023-12-21 3PCA 21 日目: SameSite Cookie 2023-12-20 3PCA 20 日目: 3rd Party Cookie Deprecation 2023-12-19 3PCA 1
最高品質のWebフォントで デザインをもっと豊かに サイトのオーナーのみなさん。 デザイナーのみなさん。 Webの文字表現に不満を感じた ことはありませんか？ ブランドの世界観が表現できなかったり、 伝えたい内容とマッチしなかったり…… 私たちは、フォントによってWebデザインを もっと豊かなものにできると信じています。 Webフォント配信サービス 「フォントプラス」をご紹介します。 筑紫B明朝
GoogleフォントをIEで使う - Qiita
Googleフォント、日本語フォントにも対応してますます便利になりました。 しかしそれと同時期にIE（Edgeも）非対応になっています。Qiitaでも言及しているひとがいました。 https://qiita.com/umeume66/items/e8982e90c02cfe2f4be4 対処法は自前でフォントをダウンロードして eot に変換するなどさまざまあります。 が、自分は Typekit の Web Font Loader を使うのがもっとも手軽と考え、その方法を採ることにしました。 Web Font Loaderの導入 もっとも簡単な導入方法はHTMLのbodyタグの末尾に以下を貼り付けることです。 <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> <sc
GoogleのSEOツール「Lighthouse（ライトハウス）」のPerformance項目を日本語解説 | ブログ | コーディング代行・外注サービスなら即日対応のくまweb
「信用できるSEOツールでWEBサイトを評価してもらいたい」 「Google公式のSEOツールの使い方を知りたい」 この記事ではこのような悩みを持つ方に、Googleも公式ツール「Lighthouse（ライトハウス）」の翻訳と解説をしていきます。 SEOツールはWEBサイトやページを指標に基づいて評価してくれるサービスです。SEOはさまざまなアプローチがありますが、WEBサイト制作者様はチェックツールを使ってWEBサイトの状況を客観的に把握したり、指標に基づいたコーディングをしたいと思われていると思います。 さまざまなSEOツールがありますが、Googleが公式ツール「Lighthouse（ライトハウス）」をリリースしていますので、こちらを使うのがオススメです。ブラウザ「Chrome」の拡張機能で、インストールすれば誰でも無料で使えます。 https://chrome.google.com
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Fontsは日本語ファイルを細切れにスライスしてHTTP/2で配信 - Qiita
web上でフォントの文字がにじむ問題（cssで解決） – marblog
Google・Adobeフォントが反映されない？ 正しい埋め込み方解説！ | masakichi-code
Webサイト上にフォントをアウトライン化して表示してみよう
ウェブフォントを最適化する | web.dev
Vuetify3 でツールバーの左側にハンバーガーメニューアイコンを表示する - プログラムを書こう！
Webフォントを軽量化する！サブセット化とセルフホスティング |東京のWeb制作会社｜株式会社ENVY DESIGN
【Webコーダー向け】効率的コーディングに必要な「フォント」の知識｜ヤナダ
トラッキングなし＆ログ取得なしで1400種類超のウェブフォントを無料で利用可能な「Bunny Fonts」
Web Font Loader で Web フォントの読み込み速度を改善してみた
UD（ユニバーサルデザイン）フォントを使うとき - Qiita
UD（ユニバーサルデザイン）フォントを使うとき - Qiita
タグ一覧(ランキング順)【直近１年間/上位25,000タグ】【2021/1 更新停止】 - Qiita
WEBフォントをbase64にエンコードしSVG又はCSSに埋め込む方法
FS的#偏愛シリーズ【実例から紹介！Webフォント編】 | フルスケール ジャーナル | フルスケール（熊本）
フォントに関するおすすめの方法 | Articles | web.dev
☆100達成！PageSpeed Insightsのスコアアップ方法 その３：Autoptimizeを導入する
最高品質のWebフォントでデザインをもっと豊かに | Webフォント・サービス FONTPLUS