CSSを使用してカスタムフォントを使用していますか？

175

（通常のArial、Tahomaなど以外の）サイトでカスタムフォントを使用している新しいWebサイトをいくつか見ました。

また、かなりの数のブラウザをサポートしています。

どうやってそれを行うのですか？また、可能であれば、フォントをダウンロードするための無料のアクセス権を人々に与えないようにします。

css font-face

— 根絶する
ソース

以下のようなJavaScriptの交換cufon

— TQ

6

fontsquirrel.com、google.com

— webfonts

365

一般的に@font-faceは、CSSでカスタムフォントを使用できます。これは非常に基本的な例です：

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

次に、特定の要素でフォントを使用するには、次のようにします。

.classname {
    font-family: 'YourFontName';
}

（.classnameはセレクタです）。

特定のフォント形式はすべてのブラウザで動作するとは限らないことに注意してください。fontsquirrel.comのジェネレーターを使用して、変換の手間を省くことができます。

Google Fontsが提供する無料のWebフォントの素敵なセットを見つけることができます（自動生成されたCSS @font-faceルールもあるので、独自に作成する必要はありません）。

また、可能であれば、フォントをダウンロードするための無料のアクセス権を人々に与えないようにします

いいえ、CSSを介して埋め込まれたカスタムフォントを使用してテキストをスタイル設定することはできませんが、他の人がダウンロードすることはできません。画像、Flash、またはHTML5 Canvasを使用する必要がありますが、すべて実用的ではありません。

お役に立てば幸いです。

— クリス
ソース

細かい回答ありがとうございます。そのようなアプローチが古いブラウザでも機能するかどうか尋ねてもいいですか？など。IE8/ 7/6？ちなみに、Google Webfontsに表示されているすべてのフォントは商用利用に無料ですか？

— 2012

1

@Donは@font-face合理的に新しいすべてのブラウザで動作しますが、適切なフォーマットが必要です。そのため、変換とルール生成のプロセスを自動化するためにfontsquirrel.comを使用することをお勧めしました。そして、はい、Google Webfontsは商用利用が無料です（詳細についての小さなリンク）。

— クリス

@Chris、あなたの宣言でfont-style:とfont-weight:を省略することは@font-face何らかの基準に違反していますか？

— Pacerier 2014年

1

これを機能させるにformat('truetype')は、ソースURLとの間に追加する必要がありました;。

— CalculatorFeline

こんにちは、クリス。このフォントの使い方を知っていますか？fontsmarket.com/font-download/gothic-821-condensed-bt

— Billal Begueradj 2018

30

フォントがブラウザ間の互換性があることを確認するには、次の構文を使用していることを確認してください：

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

ここから撮影。

— セルジュ・セーガン
ソース

25

フォントファイルをダウンロードしてCSSに読み込む必要があります。

Fe WebアプリケーションでYanone Kaffeesatzフォントを使用しています。

私はそれをロードして使用します

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

私のスタイルシートで。

— アレックスクローズ
ソース

8

今日、ウェブ上で使用されている4つのフォントコンテナ形式がありますEOT, TTF, WOFF,し、WOFF2.

残念ながら、幅広い選択肢がありますが、すべての新旧のブラウザで機能する単一のユニバーサルフォーマットはありません。

EOTはIEのみです。
TTFは部分的にIEをサポートしています。
WOFFは幅広いサポートを享受していますが、一部の古いブラウザでは利用できません
WOFF 2.0のサポートは、多くのブラウザーで進行中の作業です。

Webアプリにすべてのブラウザーで同じフォントを使用する場合は、CSSで4つのフォントタイプすべてを提供することができます。

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

— Hitesh Sahu
ソース

Hieshさん、こんにちは。何に使うの#iefixですか？そして、この部分font-family: 'besom'; !importantは、!important外;ですか？

— Jonjie

4

Google.com/webfontsまたはfontsquirrel.comから気に入ったフォントが見つからない場合は、作成したフォントでいつでも独自のWebフォントを作成できます。

ここに素晴らしいチュートリアルがあります：独自のフォントフェイスWebフォントキットを作成してください

誰かがあなたのフォントをダウンロードするのを防ぐことについてはよくわかりませんが。

お役に立てれば、

— エリック・ロビンソン
ソース

4

CUFONと呼ばれる興味深いツールもあります。このブログでは、その使い方のデモンストレーションがあります。これは本当にシンプルで興味深いものです。また、生成されたコンテンツをctrl + c / ctrl + vでクリックすることもできません。

— セルジオビニシウス
ソース

1

私はWin 8に取り組んでいます。このコードを使用してください。IEとFF、Operaなどで動作します。私が理解したことは、woffフォントはGoogleフォントでは一般的で軽量です。

ここに移動して、ttfフォントをwoffに変換してください。

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

— アーノルド
ソース

0

まず第一に、それがあなたのものであり、それが通常数ヶ月かかる場合を除いて、人々がフォントをダウンロードするのを防ぐことはできません。そして、人々がフォントを使用するのを妨げることは意味がありません。あなたがウェブサイトで見る多くのフォントは、私が以下に述べたような無料のプラットフォームで見つけることができます。

しかし、あなたのウェブサイトにフォントを実装したいなら、これを読んでください：あなたのウェブサイトにフォントを実装する ためのかなりシンプルで無料の方法があります。無料で使いやすいGoogleフォントをお勧めします。例えば、私はGoogleからのバンガーズフォントを使用します（。https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers）これは、それは次のようになります方法です： HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}

— NotTschuschl
ソース