非標準フォントをWebサイトに追加するにはどうすればよいですか？

519

画像、Flash、またはその他のグラフィックを使用せずにWebサイトにカスタムフォントを追加する方法はありますか？

たとえば、私は結婚式のウェブサイトで作業していて、そのテーマに適したフォントをたくさん見つけました。しかし、そのフォントをサーバーに追加する正しい方法が見つかりません。そして、CSSでそのフォントをHTMLに含めるにはどうすればよいですか？これはグラフィックなしで実行できますか？

html  css  fonts  font-face 
— vaske
ソース
18
この質問が行われたため、@font-faceはより広くサポートされるようになり、一般的な使用が推奨されています。IEが他のブラウザとは異なるフォーマットのフォントを必要とすることを知っておく必要があります。参照してくださいstackoverflow.com/questions/2219916/is-font-face-usable-now
— デビッド・ジョンストン
10
フォントを配布する権利があることを確認してください！
— ベトナム
2
訪問typekit.com、または安価なためfontsquirrel.com
— bjudson
1
— エイドリアンはして
3
www.fontsquirrel.comは、必要なフォントファイルを生成し、優れた防弾@fontface構文を作成するのに最適です（推奨されるfontspring.com/blog/fixing-ie9-font-face-problemsと同じ）
— Adrien Be

回答:

500

これはCSSを介して行うことができます：

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

それはされ、通常のブラウザのすべてのためにサポートされますが、TrueTypeフォント、フォント（TTF）またはWebのオープンフォントフォーマット（WOFF）を使用する場合。

— ハング
ソース
13
Internet ExplorerとFirefoxはどちらもWebkitに基づいていないため、私の意見ではかなり役に立たないソリューションです。
— キャスパー
58
それは標準なので役に立たないわけではありません。実装すればするほど、ブラウザで実装される可能性が高くなります。それはあなたが補償する別の方法を見つけるべきではないという意味ではありませんが、これを補完として使用することは私には良いようです。
— e-satis
8
ただし、Firefox 3.1は@ font-faceをサポートしています。
— Ms2ger、2009
2
@brendanjerwin：あなたのリンクの更新版- brendanjerwin.com/development/web/2009/03/03/...
— マット・ボール
60
やあみんな、何だと思う？もう2016年です！今では広くサポートされています！わーい！嬉しい、私はこの遅くこの答えを見つけました。はは。
— ジェシカ2015
121

Google Web Fontsを介していくつかのフォントを追加できます。

技術的には、フォントはGoogleでホストされており、HTMLヘッダーでリンクします。そうすれば、CSSでそれらを自由に使用できます@font-face（それについて読んでください）。

例えば：

では<head>セクション：

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

次にCSSで：

h1 { font-family: 'Droid Sans', arial, serif; }

ソリューションは非常に信頼できるようです（Smashing Magazineでも記事のタイトルに使用しています）。ただし、これまでにGoogleフォントディレクトリで利用できるフォントはそれほど多くありません。

— ミチャウポカシャ
ソース
1
2014年7月、Googleはフォントを拡張し、ほとんどの言語google.com/get/noto/#をサポートするGoogle Notoフォントを組み込みました。Abobeは、すべての言語のサポートこのオープンフォントイニシアチブサポートしてきたblog.typekit.com/2014/07/15/introducing-source-han-sansを
— vsingh
（Google Webフォント）は、フォントの.eot、.woff、および.svgバージョンをサポートしていないようです。フォントの.ttfバージョンのみをサポートします！
— Mahdi Jazini、2018
77

進むには、@ font-face CSS宣言を使用します。これにより、作成者はオンラインフォントを指定してWebページにテキストを表示できます。作成者が独自のフォントを提供できるようにすることで、@ font-faceは、ユーザーが自分のコンピューターにインストールした限られた数のフォントに依存する必要をなくします。

次の表を見てください。

ここに画像の説明を入力してください

ご覧のとおり、主にブラウザー間の互換性のために、知っておく必要のある形式がいくつかあります。モバイルデバイスでのシナリオはそれほど異なりません。

ソリューション：

1-完全なブラウザ互換性

これは、現時点で可能な限りサポートが可能な方法です。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2-ほとんどのブラウザ

物事はされWOFFに向かって大きくシフトし、おそらくに逃げることができるように、しかし：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3-最新のブラウザのみ

またはWOFFだけでも。
その後、次のように使用します。

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

参考文献と参考文献：

これは主に、この機能の実装について知っておく必要があることです。このテーマについてさらに調査したい場合は、以下のリソースをご覧になることをお勧めします。私がここに置いたもののほとんどは以下から抽出されます

— ハビエルカディス
ソース
2
非常に便利なFont Squirrelツールは、フルブラウザサポートに必要なCSSを生成できます。フォントをこれらのいずれかの形式でアップロードし、他のすべての形式に変換して、すべてダウンロードすることもできます。カスタムフォントに関しては、それは命の恩人です。
— Jacob Stamm、2016年
何のsvgFontName略ですか？フォントファミリー名に変更するか、そのままにしておくべきですか？
— ガーマン、
17

非標準フォントとは、標準形式のカスタムフォントを意味します。ここでは、その方法を示します。これは、これまでに確認したすべてのブラウザーで機能します。

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

したがって、ttfフォントとeotフォントの両方が必要になります。オンラインで利用できるいくつかのツールは、変換を行うことができます。

しかし、標準以外の形式（ビットマップなど）でフォントを添付したい場合は、私はお手伝いできません。

— BiAiB
ソース
1
オンラインツールの例：kirsle.net/wizards/ttf2eot.cgiオフラインツールの例：code.google.com/p/ttf2eot/wiki/Demo -また、使用することが可能ですWOFFのフォントを。
— Wilf、2014
11

Webサイトで非標準フォントを使用する最も簡単な方法は、sIFRを使用することです。

フォントを含むFlashオブジェクトを使用する必要がありますが、Flashがインストールされていない場合は、標準のテキスト/フォントにうまく分解されます。

スタイルはCSSで設定され、JavaScriptはテキストのFlash置換を設定します。

編集：（sIFRはプロジェクトに時間を追加し、メンテナンスが必要になる可能性があるため、非標準フォントには画像を使用することをお勧めします）。

— マット
ソース
24
なんてひどい考えだ！ブラウザにフラッシュを搭載していますが、フラッシュブロックも搭載しています。そのウェブサイトで、私のブラウザはひどい汚されたページを表示します。Flashは、大きなアニメーションや映画に使用するもののままにする必要があります。フラッシュが多すぎると、うんざりして視覚的になります。私の...
— e-satis
2
@ e-satis：どうやって？個人的には、sIFRを使用しているページと使用していないページの違いに気づくことはありません。正直なところ、これ@font-faceは素晴らしいアイデアだと思いますが、サポートされている場合ははるかに優れています。
— サーシャチェディゴフ2010
「編集：（sIFRはプロジェクトに時間を追加し、メンテナンスが必要になる可能性があるため、非標準フォントには画像を使用することをお勧めします）。」非常によく言いました。sIFRは本当にクールなテクニックですが、希望どおりの正確な外観を得るには多くが必要なようです。あなたがこのテクニックを学び、習得する時間があれば、私はそれを強くお勧めします。しかし、迅速かつ簡単なフォント置換手法を探している場合は、画像置換または@ font-face cssプロパティを使用します
— Derek Adair
10

Typeface.jsとCufonは、他の2つの興味深いオプションです。これらはJavaScriptコンポーネントであり、Internet Explorerを除くすべての新しいブラウザーの新しい<canvas>要素およびInternet ExplorerのVMLを介して、JSON形式（WebサイトでTrueTypeまたはOpenType形式から変換できます）で特別なフォントデータをレンダリングします。

（現在のところ）両方の主な問題は、テキストの選択が機能しないか、少なくともかなり不自然に機能することです。

それでも、それは見出しのために非常にいいです。本文...わからない。

そして、それは驚くほど高速です。

— トーマス
ソース
もう1つの興味深いオプションはtypekit.com同様の概念です。
— ザック、
8

または、sIFRを試すこともできます。Flashを使用していることは知っていますが、利用できる場合のみです。Flashが使用できない場合は、元のテキストが元の（CSS）フォントで表示されます。

— キャスパー
ソース
4

SafariとInternet ExplorerはどちらもCSS @ font-faceルールをサポートしていますが、2つの異なる埋め込みフォントタイプをサポートしています。Firefoxは近いうちにAppleと同じタイプをサポートする予定です。SVGはフォントを埋め込むことができますが、プラグインなしではまだ広くサポートされていません。

私が見た中で最もポータブルな解決策は、JavaScript関数を使用して、見出しなどを、サーバー上で生成およびキャッシュされた画像で選択したフォントに置き換えることです-この方法では、テキストを更新するだけで、 Photoshopの周りのもの。

— ゾビエ
ソース
これはJavaScriptで行う必要はありません。今日ではかなり多くの人がJavaScriptを使用することを好むことを知っていますが、ここでは標準のCSSテクニックの方が適切な場合があります。sitepoint.com/article/header-images-css-xhtml
— hangy
混乱が生じた場合は申し訳ありませんが、この手法は、CSSのように画像を置換する方法を指していません。特定の文字列を表すグラフィックスをサーバーでオンザフライで生成することです。これらを手動で作成する必要がなくなります。
— zobier 2008
4

ASP.NETを使用している場合は、次のコマンドを使用して、サーバーにフォントを（インストールされているフォントベースに追加する場合のように）インストールすることなく、イメージベースのフォントを簡単に生成できます。

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

そして、そのフォントでに描画しGraphicsます。

— マットラント
ソース
1
ええ、そうです...そして、ユーザーはコピーと貼り付けを忘れることができます。また、古いブラウザではズームも。私は帯域幅の問題についてさえ話しません！
— e-satis
2
ええ、わかりました、そして質問はそれがコンテンツテキストにそれを使用するつもりであると指定しましたか？いいえ、それは一般的な質問であり、これは一般的な答えでした。テキストやヘッダーなどの小さなスニペットは、多くの帯域幅を占有しません。シーシュ、グリップをゲット！
— マットラント2008
3

少し調べて、動的テキスト置換（2004-06-15に公開）を掘り下げました。

この手法では画像を使用しますが、「ハンズフリー」のようです。あなたはあなたのテキストを書き、あなたはその場であなたのためにいくつかの自動化されたスクリプトにページ上で自動化された検索と置換をさせます。

これにはいくつかの制限がありますが、私が見た他のすべてのものよりもおそらく簡単な選択肢の1つ（およびブラウザー互換性が高い）です。

— ケント・フレドリック
ソース
3

WOFFフォントを使用することも可能です- ここの例

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
— ウィルフ
ソース
3

このような実際のフォントへのリンクを提供するだけで、あなたは行くことができます

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
— アビジートクマール
ソース
良いシンプルな代替手段。そして、あなたにはそれを使う権利があるはずです。developer.google.com/fonts/docs/getting_startedを
— Tim Erickson、2018年
2

Typeface.js JavaScriptの方法：

typeface.jsを使用すると、Webページにカスタムフォントを埋め込むことができるので、テキストを画像にレンダリングする必要がありません。

サイトのグラフィックテキストを目的のフォントで表示するために画像を作成したりフラッシュを使用したりする代わりに、訪問者がローカルにフォントをインストールしているかのように、typeface.jsを使用してプレーンHTMLおよびCSSで書き込むことができます。

http://typeface.neocracy.org/

— バッカル
ソース
2

フォントのファイルがある場合は、他のブラウザ用にそのフォントのフォーマットをさらに追加する必要があります。

この目的のために、私はFontsquirrelのようなフォントジェネレーターを使用します。これは、すべてのフォント形式とその@ font-face CSSを提供します。CSSファイルにドラッグアンドドロップするだけです。

— サーディーズ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.