自社サービスのロゴをWebフォント化して楽をしようと試みてみる方法 | nanapi TechBlog

2014/05/28 9008 users nanapi TechBlog ロゴ エンジニア 修正 みんな

Webサービスをリリースしたばかりの頃は、毎日修正で日々細かい調整に追われるもの・・・さらに最近はレスポンシブWebデザインでMedia Queriesの分、いちいち修正するのかとか思うと、Sass mixinの使い方が巧いデザイナー、エンジニアが羨ましい・・・みんな、そんな毎日じゃないかなと思います。今回はちょっとでも楽をしてほしくて、本当にちょっとの楽くらいにしかならないですが、Webフォント... 続きを読む

【第2弾】少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2016/02/01 826 users 実装 Webクリエイターボックス CSS小技集 コード タタ

はるか6年前に書いた記事「 少しのコードで実装可能な20のCSS小技集 」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像を... 続きを読む

意外と知らない？アイコンはWebフォントでつくるとこんなに便利！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/02/28 815 users シンボル jsdo.it KAYAC DESIGNER 以下

Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボル... 続きを読む

グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 編集長ブログ―安田英久 | Web担当者Forum

2015/03/10 742 users 安田英久 グーグル Web担 Web担トップ なか

Web担トップ » 編集記事一覧 » [コラム] Web担のなかの人――編集部ブログ » 編集長ブログ―安田英久 » グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ 編集長ブログ―安田英久 グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ 安田英久（Web担 編集長） 3/10(火) 11:00 ツイート サイト企画／制作／... 続きを読む

漢字も使えるフリーのWebフォントまとめ | Love&pointcard

2012/05/17 739 users フリーフォント フォント デバイス 漢字 web

ポイントカードを収集しているサイトですが、現在はただの普通のブログです。IT/Webな情報や雑記。CSS3のWebフォントは海外では積極的に取り入れられていますが、日本語ではほとんど普及していません。そこで、再配布可能かつ漢字で使えるフリーフォントを集めてみました。 Webフォントとは Webフォントは、サイトを閲覧するデバイスにインストールされていないフォントを読み込ませて表示する技術です。We... 続きを読む

デコもじで、ホームページが、ブログが、もっと楽しくなる♪

2010/04/27 719 users デコもじ デコ 技術 ホームページ お試し

デコもじでホームページが、ブログが、もっと楽しく、もっと個性的になる！デコもじサービスは無料でお試しいただけます！デコもじは「Webフォント」技術を利用した、全く新しいフォントサービスです。ブログやホームページなどで誰でも簡単にご利用いただけます。 続きを読む

●●っぽい表現ができる「CSS3」サンプル集 | Find Job ! Startup

2013/10/29 602 users イシジマミキ Startup 見出し デザイナー 流行

こんにちわ！ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。 Webフォントの充実、スマートフォンの流行、そしてCSS3の表現力アップにより、画像を使わなくても凝った表現の見出しが作れるようになりました。 どんなデザインがあるのか。海外のサイトを調べるとたくさん出てきますが日本語だとあまりカッコ良く見えなかったりもします。そこで今回は、日本語書体で使えるCSS3のコードサン... 続きを読む

もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法 : アシアルブログ

2012/07/10 567 users 鴨田 アイコン アシアルブログ プロトタイプ アイコン画像

こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとして... 続きを読む

PCサイトとスマートフォンサイトをどのように扱うか？国内のレスポンシブウェブサイトをまとめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/04/12 502 users Webデザインクリップ Web制作 SEO 共通 選択肢

海外の企業サイトではレスポンシブルウェブサイトもだんだんと浸透しております。 Responsive Web Design を利用している企業サイトリスト 毎日更新したり、記事コンテンツの多いサイトでは、全デバイスのソース管理や更新が1ソースでできるレスポンシブウェブサイトの導入は一つの選択肢として魅力的です。 また共通のURLを使用することでSEOに強い面もあります。 Webフォントを使用すれば、... 続きを読む

商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon

2022/07/27 473 users SVGアイコン 太っ腹ライセンス 改変 SVG 再配布

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの... 続きを読む

Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ - かちびと. net

2011/12/22 447 users リソース Tips メモ net 最低限

Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識 最... 続きを読む

CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2011/11/16 446 users Webデザインクリップ CSS3 Web制作 注目 フォント

CSS3のWebフォント機能を使うと、サーバー上にあるフォントファイルを使用するので、ユーザーのPCにインストールされていないフォントを表示できるようになり、ユーザーのフォント閲覧環境に依存しません。適用方法も簡単で、使用したいフォントファイルをサーバーにアップロードし、CSS3の@font-faceでフォントファイルを指定し読み込ませるだけで利用できます。これによりフォントによる自由な表現が可能... 続きを読む

画像の代わりに使えるアイコンタイプのWebフォントのまとめ｜Webpark

2012/08/28 390 users アイコンタイプ Format src font-family

アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentyp... 続きを読む

Google Fontsが日本語WEBフォントを正式サポート – Dream Seed

2018/09/29 359 users Dream Seed Google Fonts 難点 反面

ユーザーの端末にインストールされていないフォントを表示できるWEBフォント。便利な反面、日本語など文字数が多いフォントではファイルサイズが大きくなり、通信量が増えてしまうのが難点です。 しかし、そんな日本語フォントをGoogleのWEBフォントサービス「Google Fonts」がサポートしました。といっても、以前から早... 続きを読む

Webフォント読み込み戦略（2021年） - MOL

2021/04/21 356 users MOL 戦略

Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フ... 続きを読む

[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js | コリス

2014/03/06 341 users コリス カーニング スクリプト jQuery 句読点

ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.K... 続きを読む

全310種、美しいソリッドなラインで描かれたかわいいアイコン素材 -Elegant Icon Font | コリス

2013/10/02 339 users コリス TTF ベクタ EOT WOFF

ブログでも企業サイトでもよく見かける310種類のアイテムを美しいエレガントなラインで描いたアイコンフォントを紹介します。 Webフォントとして利用できるので、サイズやカラーなど変更しても美しいまま利用できます。.pngも入ってるので、画像で利用してもOK。 Elegant Icon Font ダウンロードできるアイコンのフォーマットは3種類。 フォント（.ttf, .woff, .eot） ベクタ... 続きを読む

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）

2016/02/13 322 users Edge Firefox Chrome Windows 目次

概要 日本語のWebフォントはブラウザーによってはキレイ（滑らか）に見えないこともあります。、滑らかさを出せるCSS設定を紹介します。 目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1... 続きを読む

国内でよく使われてそうなwebサービスのアイコン３０個をIllustrator用ベクターとwebフォントで作ったので配布します。 | KYOPPI

2015/01/20 317 users ask.fm Evernote Dropbox Facebo

需要があるかはわかりませんが、国内でよく使われてそうなwebサービスのアイコン３０個をIllustrator用ベクター(CS5以上)とwebフォントでつくったので配布します。ほんとwebデザインのウの字も出てない当ブログで脈絡なく唐突に素材配布です。 ダウンロードファイルには以下の３０個のサービスのアイコンが含まれてます。 amazon、ask.fm、dropbox、evernote、facebo... 続きを読む

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス

2017/07/26 309 users コリス Chromium プロパティ CSS 新しいプロパティ

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium ）。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は... 続きを読む

【商用OK】Google Fontsで使えるオススメ日本語フリーフォント31個まとめ - PhotoshopVIP

2021/09/16 303 users ウエイト PhotoshopVIP 日本語フリーフォント

この記事では、Google Fontsで使える日本語フリーフォントをまとめてご紹介します。 Google Fontsには現在、31の日本語書体が提供されており、すべてのウェイトを合わせると、74フォントが商用OK＆完全無料となっています。 フォント選択の幅が広がるWebフォントを利用して、ウェブサイトのデザインをグッと良くしてみま... 続きを読む

これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon

2023/02/20 286 users SVGアイコン 太っ腹ライセンス 改変 min UIデザイン用

WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 Min... 続きを読む

Webフォントを使ってみよう！@font-face 関連の情報いろいろ - かちびと.net

2010/10/27 279 users font-face アンチエイリアス net フォント コピペ

Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります... 続きを読む

モリサワ　クラウドフォントサービス「TypeSquare（仮称）」を発表 | 企業情報 | 株式会社モリサワ

2011/08/10 268 users モリサワ 森澤彰彦 TypeSquare モリサワ書体 仮称

株式会社モリサワ（代表取締役社長：森澤彰彦 本社：大阪市浪速区敷津東2-6-25 Tel.06-6649-2151代表）は、モリサワ書体をWebフォントとして利用できるクラウドフォントサービス「TypeSquare（仮称）」を2011年度内に開始することを発表します。 Webフォントは、インターネットを介してフォントを配信する技術で、閲覧する環境にインストールされていないフォントでもブラウザ上で表... 続きを読む

Googleフォントの使い方: Webフォントの表示の仕組みと最適化 | コリス

2016/11/21 256 users コリス Boy 欠点 I don't 利点

Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。 当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。 文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチ... 続きを読む