HTMLにフォントを埋め込む方法は?


80

私は、Webページにフォントを埋め込むための適切な解決策(特にSEO側から)を見つけようとしています。これまでのところ、Firefoxでも動作しないW3Cソリューションと、このかなりクールなソリューションを見てきました。2番目の解決策は、タイトルのみです。全文に利用できる解決策はありますか?Webページの標準フォントにうんざりしています。

ありがとう!




2
@ user2284570この質問にはもっと良い答えがあります。これの複製としてもう1つを閉じました。
マダラの幽霊

この質問に対する更新された回答はありますか?すべての答えは5年以上前のものです。また、誰かが知っているなら、私はMDNに関する参照を見つけることができませんでした。
1.21ギガワット

更新された答えを提供し、世界を助けてください。私は2011年以来HTMLを作成していません
DanRosenstark20年

回答:


134

世の中変わったんだよこの質問が最初に尋ねられ、答えられて以来、しました。@ font-face埋め込みを使用して、本文テキストのクロスブラウザフォント埋め込みを機能させるために多くの作業が行われてきました。

PaulIrishが防弾@ font-face構文をまとめました、他の複数の人々からの試みを組み合わせたを。記事全体(上部だけでなく)を実際に確認すると、単一の@ font-faceステートメントでIE、Firefox、Safari、Opera、Chromeなどをカバーできます。基本的に、これは何も壊さない方法でOTF、EOT、SVG、およびWOFFをフィードできます。

彼の記事から抜粋:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Font Squirrelは、そのベースから作業して、TTFまたはOTFファイルをアップロードし、他のタイプの自動変換されたフォントファイルを取得できる@ font-face Generatorを含む、さまざまな便利なツールを、構築済みのCSSおよびデモHTMLページ。Font Squirrelには、何百もの@ font-faceキットもあります。

相馬デザインもまとめて FontFriendブックマークレット作成しました。これは、ページ上のフォントをその場で再定義して、試してみることができるようにします。これには、FireFox3.6以降でのドラッグアンドドロップの@ font-faceサポートが含まれています。

最近、GoogleはGoogleWebフォントの提供を開始しました、オープンソースライセンスの下で利用可能で、Googleのサーバーから提供されるフォントの品揃えです。

ライセンスの制限

最後に、WebFonts.infoは、ライセンスに基づいて@ font-face埋め込みに使用できるフォントのすばらしいwikiのリストをまとめました。完全なリストであるとは主張していませんが、埋め込み/リンクに使用できるフォント(CSSファイルの帰属などの条件付き)が必要です。フォントのダウンロードでは明らかに進められない制限があるため、ライセンスを読むことが重要です。


11
合法的に多額のお金でそのフォントのライセンスを購入したとしても、フォントを自動的に取得して@ font-face-izeすることは許可されていないことを強調する価値があると思います。そのような電子的な再配布が許可されているかどうかについては、フォントのライセンスを確認する必要があります。侵害は非常に簡単に検出およびトロールできるため、特に適切な管轄区域にある会社の場合は、問題が発生しやすくなります。
ペッカ

FontSquirrelは、ビルド済みのフォントキットとジェネレーターの両方でこれを明確に示しています(フォントが実際にそのような使用のためにライセンスされていることを確認する必要があります)。他にも変換ツールがありますが、どれがライセンスについて議論するのかわかりません。
フェンスポスト2009

魅力的なもの。好奇心から、どうやってこの投稿にたどり着きましたか?同じ日に複数の回答があり、あなたの回答にはいくつかのコメントがありました。+1 ...
ダンローゼンスターク2009

1
どうやってそれを見つけたのか覚えていません-おそらくHTMLフォントを検索しますが、クリスマス直前にクライアントのためにこれだけに取り組んでいたので、情報が新鮮だったので応答しました。Pekkaはそれを古い投稿の新しい活動と見なしたと思います。システムフラグが複数のリンクを投稿しようとしているかどうかはわかりませんが(最初はブロックされていることはわかっています)、「これをチェックして、誰かがスパムではないことを確認してください」の場合があると思いました。
フェンスポスト2009

@Pekka「侵害の検出とトロールは非常に簡単です」...少し教えていただけますか...この検出とトロールはどのように行われ、どのような状況で発生しますか?
ダンローゼンスターク2012

9

Facetype.jsを試してみてください。.TTFフォントをJavascriptファイルに変換します。完全なSEO互換性があり、FF、IE6、Safariをサポートし、他のブラウザーでは正常に機能が低下します。


2
それがどのように機能するのか疑問に思う人のために、それはキャンバスタグ(html 5)またはVMLを使用します。
クリスS

1
私はこの解決策に同意する必要があります。それは非常に単純に見え、私が投げるすべてのブラウザで機能しているようです。
askon 2010年

1
このリンクは無効です。
aleclarson 2017年

6

いいえ、最先端のブラウザを使用している人だけに対応するつもりがない限り、体型に適切な解決策はありません。

マイクロソフトは独自のフォント埋め込み技術であるWEFTを持っていますが、それが何年もの間話題になっているのを聞いたことがなく、それを使用している人は誰も知りません。

表示タイプ(ヘッドライン、ブログ投稿のタイトルなど)にはsIFRを使用し、ボディタイプ(Trebuchet MSなど)には使い古されていないWebセーフフォントの1つを使用します。すべてのWebセーフフォントに飽きている場合は、用語の定義が狭すぎる可能性があります。このストックフォントのマトリックスを見てください。主要なOSに付属しているようなフォントカスケードを見つけることができる可能性があります。ほぼすべてのWebユーザーをキャッチします。

例:font-family: "Lucida Grande", "Verdana", sans-serifは一般的なフォントカスケードです。OSXにはLucidaGrandeが付属していますが、Windowsを使用している場合は、LucidaGrandeと同様のサイズと形状の文字を使用したWebセーフフォントであるVerdanaを入手できます。Linuxユーザーは、ほとんどのディストリビューションのパッケージマネージャーに存在するWebセーフフォントパッケージをインストールした場合にもVerdanaを入手できます。そうでない場合は、通常のサンセリフにフォールバックします。


2
また、石鹸箱に少し立ってみましょう。Windowsにもっと「良い」フォントがあればいいのですが(OS Xはタイポグラフィの歴史の中で最大のヒット曲です:Futura、Helvetica、Gill Sansなど)、それは私たちが持っている良いことですフォントを選ぶときに自分自身を抑制するために。自由は悪にも利用できます。
savetheclocktower 2008年

あなたのコメントにコメントはありませんが、答えてくれてありがとう。それは素晴らしいことです。どこかにカスケードのリストはありますか?再度、感謝します。
ダンローゼンスターク2008年

ここに1つのリストがあります:(ampsoft.net/webdesign-l/WindowsMacFonts.html)。これは控えめで、プラットフォーム間で同一(またはほぼ同一)のフォントのみをリストします。どの「安全な」フォントが「危険な」フォントに最も似ているかを確認するために、比較を行う必要がある場合があります。
savetheclocktower 2008年

(ああ、また:常に一般的なフォールバックを指定します— sans-serif、serif、またはmonospace。そうすれば、ユーザーが要求したフォントを持っていない場合でも、少なくともボールパークにあります。)
savetheclocktower 2008年

1
私が取り組んでいるサイトにアクセスするほとんどのユーザーは、今でもIE6(これらの野郎)を使用しています。そのため、その観点から、最新のメジャーバージョンは最先端であると考えています。
遺伝子

4

そして、それもありそうにありません-EOTは、IEによってのみサポートされるかなり制限されたフォーマットです。Safari3.1とFirefox3.1(現在のアルファ版)とおそらくOpera 9.6の両方がTrueTypeフォント(ttf)の埋め込みをサポートしており、少なくともSafariは同じメカニズムでSVGフォントをサポートしています。離れたリストは、しばらく前にこれについて良い議論をしまし


3

Typekitをチェックしてください商用オプションの(無料のパッケージも利用できます)。

これは、(使用されているブラウザに応じて、異なる技術を使用して@font-face対のEOT形式)を、彼らはまたあなたのための問題をライセンスすべてのフォントの世話をします。IE6まですべてをサポートします。

Typekitの仕組みに関する詳細は次のとおりです。


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