web-dev-qa-db-ja.com

Webサイトに標準以外のフォントを追加する方法

画像を使わずにウェブサイトにカスタムフォントを追加する方法はありますか？ Flash あるいは他のグラフィックス？

例えば、私は結婚式のウェブサイトで働いていました、そして私はその主題のためにたくさんのニースのフォントを見つけていました、しかし私はそのフォントをサーバーに追加する正しい方法を見つけることができませんHTMLに？これはグラフィックなしでも可能ですか？

htmlcssfontsfont-face
484
vaske

これは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 Open Font Format（WOFF）を使用している場合。

472
hangy

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 Font Directory 。

113
Michał Pękała

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

次の表を見てください。

enter image description here

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

解決策：

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;
}

参考文献とさらに読む：

それが主にこの機能の実装について知っておくべきことです。あなたが主題についてもっと研究したいならば、私は以下のリソースを見てみることを勧めます。私がここに置いたものの大部分は以下から抜粋されたものです。

70
Javier Cadiz

非標準フォントの場合は、標準フォーマットのカスタムフォントを意味します。これが私のやり方であり、これまでに確認したすべてのブラウザで機能します。

@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フォントの両方を必要とするでしょう。オンラインで利用可能ないくつかのツールは変換をすることができます。

あなたが標準的でないフォーマット（ビットマップなど）でフォントを付けたいと思うなら、私はあなたを助けることができません。

16
BiAiB

私はウェブサイト上で標準外のフォントを使う最も簡単な方法はsIFRを使うことだとわかりました

これはフォントを含むFlashオブジェクトの使用を含みますが、Flashがインストールされていない場合は標準のtext/fontにうまく劣化します。

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

編集：（sIFRはプロジェクトに時間を追加し、メンテナンスを必要とするかもしれないので、私はまだ非標準フォントのためにイメージを使うことを勧めます）

11
Matt

記事IEの書体：Webフォントを機能させるによると、3つの主要ブラウザすべてで機能します。

これが私が働いたサンプルです： http://brendanjerwin.com/test_font.html

フォントの埋め込みに詳しい説明があります。

10
brendanjerwin

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

（現在のところ）両方ともの主な問題は、テキストの選択が機能しない、または少なくとも非常にぎこちなくしか機能しないことです。

それでも、それは見出しのために非常にいいです。本文...わかりません。

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

10
Thomas

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

8
Casper

Flashを使用せずにWebサイトにカスタムフォントを追加する方法はありますか？

もちろん、 Silverlight を使用してください。

5
TraumaPony

これをするためにW3Cが推奨しているテクニックは "埋め込み"と呼ばれており、ここの3つの記事でよく説明されています： 埋め込みフォント 。私の限られた実験の中で、私はこのプロセスがエラーを起こしやすいことを発見し、マルチブラウザ環境でそれを機能させることにおける成功は限られていました。

4
Steve Moyer

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

私が見た中で最も移植性の高い解決策は、JavaScript関数を使用して、選択したフォントで見出しなどを生成されてサーバー上にキャッシュされた画像に置き換えることです。 Photoshopの中のもの。

4
zobier

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

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

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

4
mattlant

WOFFフォントを使うことも可能です - example here

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
3
Wilf

単にこのような実際のフォントへのリンクを提供するだけで、あなたは行ってもいいでしょう

<!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>
3
Abhijeet Kumar

Internet Explorerでしか機能しないようですが、Googleで "html embed fonts"をすばやく検索すると となります。 - - http://www.spoono.com/html/tutorials/tutorial.php?id=19

プラットフォームにとらわれない（そしてそうすべきです！）のであれば、画像を使用する必要があります。そうでない場合は、標準のフォントを使用する必要があります。

3
James Muscat

私は少し研究を重ね、動的テキスト置換を掘り下げました（2004-06-15公開）。

この手法は画像を使用しますが、「ハンズフリー」のようです。あなたはあなたのテキストを書きます、そしてあなたはその場であなたのためにあなたのためにいくつかの自動化されたスクリプトが自動化されたfind-and-replaceをあなたのためにするようにします。

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

3
Kent Fredric

Typeface.jsのJavaScriptの方法：

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

サイトのグラフィックテキストを目的のフォントで表示するためだけに画像を作成したりFlashを使用したりする代わりに、訪問者がローカルにフォントをインストールしている場合と同様に、typeface.jsを使用してプレーンなHTMLおよびCSSで記述できます。

http://typeface.neocracy.org/ /

2
bakkal

Monotypeは最近あなたのウェブページでそれらを使うための新しいシステムと一緒に彼らのフォントの多くをリリースしました： http://www.webfonts.fonts.com/ /

2
Cogwheel

記事を参照してください。美しいWebタイポグラフィのための50の便利なデザインツール代わりの方法については。

Cufon だけを使った。私はそれが信頼できてそして非常に使いやすいとわかったので、私はそれで立ち往生しました。

2
Blair

あなたがあなたのフォントのファイルを持っているなら、あなたは他のブラウザのためにそのフォントのより多くのフォーマットを追加する必要があるでしょう。

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

2
saadeez

私はグラフィックがこの場合あなたの唯一の選択肢であると思います。

1
Ed Brown