web-dev-qa-db-ja.com

Twitterで別のフォントを使用するbootstrap

通常のWebフォントではない、Webサイトに別のフォントを使用したい。すでにEOTファイルを作成しています。これらのフォントをTwitterと統合するにはどうすればよいですかbootstrap？

ありがとう

csshtml5twitter-bootstrapresponsive-designtwitter-bootstrap-3
32
dxenaretionx

私が見た最も簡単な方法は、 Google Fonts を使用することです。

Googleフォントに移動してフォントを選択すると、HTMLを挿入するためのリンクが表示されます。

Google's link to your font

次に、これをcustom.cssに追加します。

h1, h2, h3, h4, h5, h6 {
    font-family: 'Your Font' !important;
}
p, div {
    font-family: 'Your Font' !important;
}

または

body {
   font-family: 'Your Font' !important;
}
49
Kyle Pennell

公式Webサイトでカスタマイザーを見つけることができます。これにより、@font-family-baseとして、いくつかのLESS変数を設定できます。レイアウトでカスタムフォントをリンクし、カスタム生成されたbootstrapスタイルを使用します。

ここにリンク

@font-faceルールを使用した例で、WOFF形式（ブラウザーの互換性に非常に適しています）を使用して、このCSSをapp.cssファイルに追加しますandカスタムboostrap.cssファイルを含めます。

@font-face {
  font-family: 'Proxima Nova';
  font-style:  normal;
  font-weight: 400;
  src: url(link-to-proxima-nova-font.woff) format('woff');
}

Proxima Novaはライセンス下にあることに注意してください。

12
zessx

こんにちは、ブートストラップでカスタマイズされたビルドを作成できます。次のページでフォント名を変更するだけです

ブートストラップ2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables

ブートストラップ3 http://getbootstrap.com/customize/#less-variables

その後、cssファイルで適切な@ font-faceを使用し、それをページにリンクしてください。または、フォントキットジェネレーターを使用することもできます。

3
Mon Noval

twitter bootstrap cssファイルをカスタマイズして、bootstrap.cssファイルをテキストエディタで開き、フォントファミリをフォント名で変更して保存します。

または http://getbootstrap.com/customize/ に行き、カスタマイズされたTwitterブートストラップを作成します

2
Able Alias

まず、適切な@font-faceルールを使用して、Webサイト（または、より具体的にはCSS）にフォントを含める必要があります。
ここから先に進むには複数の方法があります。私がnotすることの1つは、bootstrap.cssを直接編集することです-新しいバージョンを取得すると、変更は失われます。ただし、bootstrapファイル（Webサイトにカスタマイズページがあります）をカスタマイズすることもできます。フォント名とすべてのフォールバック名を対応するタイポグラフィテキストボックスに入力するだけです。 bootstrap=ファイルの新しいバージョンまたは更新されたバージョンを取得するたびに、これを行う必要があります。
別の可能性として、別のスタイルシート内のbootstrapルールを上書きします。これを行う場合は、特定のセレクターを使用する必要があります。 bootstrap=セレクター。
副次的注意：ブラウザのサポートに関心がある場合、単一のEOTバージョンのフォントでは不十分な場合があります。サポート表については、 http://caniuse.com/eot を参照してください。

0
Onkel Toob