Google Fonts and font-display | CSS-Tricks
Hey! This whole article is about a time before May 2019 in which Google Fonts didn’t offer a way to use font-display without self-hosting the fonts. To use font-display with Google Fonts, you include a URL parameter like &display=swap in the URL, like https://fonts.googleapis.com/css?family=Open+Sans&display=swap. If you’re copying code from Google Fonts now, it’s the default, so you get it automa
Faster Google Fonts with Preconnect - CDN Planet
Summary Load the Google font files faster by adding the preconnect hint The preconnect hint is supported by Chrome, Opera, Firefox and Android browsers Don't forget to add the crossorigin attribute! The Google Fonts performance problem Google Fonts is a free and easy-to-use service for using high-quality fonts on your website. Many websites use Google Fonts and its network performance is generally
Case Study - Analyzing Web Font Performance - KeyCDN
You can see a full list of web safe fonts at cssfontstack.com. And if you are on mobile, Google fonts are supported by most modern mobile operating systems, including Android 2.2+ and iOS 4.2+. Since the Ice Cream Sandwich release, Roboto has been the standard typeface on Android. Since Froyo, Noto has been the standard typeface on Android for all languages not covered by Roboto. Those are the fon
Black Tie, from the creator of Font Awesome
On sale at the Kickstarter price for a limited time!
Easy web-font generator — Fontie
by Pixels|Bytes Fontie easily converts your desktop-fonts into smooth & good-looking web-fonts that work everywhere. It also generates the CSS @font-face that is required to use the fonts on your website. Various options give you the possibilty to fix and optimize your web-fonts. Various formats Fontie can convert any TTF & OTF desktop-font into a WOFF, WOFF2, EOT, SVG, TTF & OTF web-font. The gen
localFont - Web FontをlocalStorageを使ってキャッシュ MOONGIFT
Web Fontを使うとこれまで画像で作っていたロゴのようなものをテキストで表現できたり、さらにアイコンフォントのように大きさや色を自由に決められるアイコンが使えるようになります。 問題点としては画像一つに比べるとデータ量が多く、サイズが大きくなってしまうことでしょう。そこで使ってみたいのがlocalFontです。 localFontの使い方 こちらがメインページです。woff/woff2/ttfフォントをドロップします。 そうするとスタイルシートとJavaScriptでの設定が表示されます。 複数指定も可能です。 localFontはlocalStorageを使ってWeb Fontのデータをキャッシュするためのコードを表示します。localStorageは5MBまでの制限はありますが、キャッシュよりも効率的、高速な表示が期待できます。Web Fontを使っているならばlocalFontを
まるで画像。テキストを曲線上で表現する·CSSWARP MOONGIFT
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
Webフォントにも利用可能なフリーの天気アイコンフォント・Climacons Font
土曜日なので軽い話題。天気 アイコン型のWebフォントです。 スマートフォンのアプリ向け に作られたみたいです。見た目 が可愛いのでアプリ以外にも 何かに利用したいですね。 天気アイコンフォント、というニッチなニーズに応えたフリーフォントです。スマフォのアプリなんかに良さそうな感じ。Webフォントにも利用できますが、PSDやEPSも用意されています。 可愛らしい天気アイコンです。UNIQLO CALENDARにも似たようなテイストのアイコンが使われていましたね。 結構揃ってます。 フォトショやイラレで使えるデータもあります。 商用でも使っていいみたいですけど直に販売したりするのはやめてくれ、との事です。下部に規約あるので目を通してくださいませ。 Climacons Font
モリサワのWebフォントが無料キャンペーンやってたので試してみたよ
モリサワのフォントをWebフォント として使えるようになりました。 現在キャンペーン中で、期間限定 で無料で利用する事が出来ます。 いつもお世話になっているフォント なので普及活動などしてみようか と思います。 というわけでモリサワのWebフォントレビューです。キャンペーンは以下より申し込めます。（って教わった typesquare というわけで一部試してみました。ラインナップは上記サイトで確認出来ます。 フォーク M イーハトーヴォ物語あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波 1 2 3 4 5 10 kachibito.net
Web上でもフォント指定を推進！どのフォントが使われているか調べてみよう·WhatFont Tool MOONGIFT
WhatFont ToolはWeb上のテキストがどのフォントを使っているか調べるためのツールです。ブックマークレット、Google Chrome/Safari機能拡張があります。 Webサイトではあまりフォント指定が行われていません。それはローカルにフォントがあるかどうか分からないためです。しかしWebフォントを使えば問題はある程度解決します。そこでWebフォントが使われている現場でのフォントチェックに使えるのがWhatFont Toolです。 アイコンクリックで起動します。エスケープキーまたはExit WhatFontをクリックすると終了します。 フローティングでフォント名を表示します。 クリックするとフォントの詳細が表示されます。 右下にフォントの色が表示されます。 クリックするとRGB表示が切り替わります。 フォントの出元も表示されます。こちらはTypeKitから読み込まれたフォント
Webフォントを上手くWebデザインに取り入れたサイトを収集しているギャラリーサイト・the WEB FONTS gallery
ありそうでなかったWebデザインギャラリー だったのでご紹介。Googleでも提供して くれている、Webフォント。日本語では なかなか難しいですが、英語圏ではかなり 一般化してきている印象です。そんな Webフォントを上手く利用したWebサイト を収集しているギャラリーです。 Know The Font: 3 Typography Inspiration Sitesという記事の中で紹介されていたWebデザインギャラリーです。ありそうで無かったですね、このギャラリー。良いインスピレーションが得られそうです。 Webフォントを取り入れたWebサイトのデザイン例です。まだ数は少ないですけど使い方は参考にしたいので覚えておきたいギャラリーですね。SEO的にも画像よりテキストのほうが良さそうですしね。 個別ページです。使用してるWebフォントも書いてくれています。親切ですねー ブックマークレットで
インストールせずに、好きなWeb Fontsを使おう
WebFontsとは WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。 以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9／Firefox 6／Chrome 12／Opera 11.5／Safari 5.1 で動作確認済みです。 このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。 それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
