wake-up-neo.com

Verwenden einer anderen Schriftart mit Twitter-Bootstrap

Ich möchte eine andere Schriftart für meine Website verwenden, die keine normale Webfont ist. Ich habe bereits EOT-Dateien erstellt. Wie kann ich diese Schriftarten jetzt mit Twitter-Bootstrap integrieren? Kann jemand helfen ?

Vielen Dank

32
dxenaretionx

Der einfachste Weg, den ich gesehen habe, ist die Verwendung von Google Fonts .

Gehen Sie zu Google Fonts und wählen Sie eine Schriftart aus. Anschließend erhalten Sie von Google einen Link zum Einfügen in Ihren HTML-Code.

Google's link to your font

Dann fügen Sie das zu Ihrer custom.css hinzu:

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

oder

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

Auf der offiziellen Website finden Sie ein Anpassungsprogramm, mit dem Sie einige LESS-Variablen als @font-family-base einstellen können. Verknüpfen Sie Ihre benutzerdefinierten Schriftarten in Ihrem Layout, und verwenden Sie Ihren benutzerdefinierten Bootstrap-Stil.

Link hier

Fügen Sie für ein Beispiel mit der @font-face-Regel im WOFF-Format (das ziemlich gut für die Browserkompatibilität geeignet ist) dieses CSS in Ihre app.css-Datei ein, und schließt Ihre benutzerdefinierte boostrap.css-Datei ein.

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

Bitte beachten Sie, dass Proxima Nova unter einer Lizenz steht.

12
zessx

Hallo, Sie können einen benutzerdefinierten Build auf Bootstrap erstellen, ändern Sie einfach den Namen der Schriftart auf den folgenden Seiten

Bootstrap 2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables

Bootstrap 3 http://getbootstrap.com/customize/#less-variables

Vergewissern Sie sich anschließend, dass Sie in einer CSS-Datei das richtige @ font-face verwenden, und verknüpfen Sie es mit Ihrer Seite. Oder Sie können Font-Kit-Generatoren verwenden.

3
Mon Noval

sie können die Twitter-Bootstrap-CSS-Datei anpassen, die bootstrap.css-Datei in einem Texteditor öffnen und die Schriftfamilie mit Ihrem Schriftartnamen ändern und SPEICHERN.

ODER gehen Sie zu http://getbootstrap.com/customize/ und erstellen Sie einen benutzerdefinierten Twitter-Bootstrap

2
Able Alias

Zunächst müssen Sie Ihre Schriftart mit einer entsprechenden @font-face-Regel in Ihre Website (oder genauer gesagt in CSS) einfügen.
Ab hier gibt es mehrere Möglichkeiten, um fortzufahren. Ich würde nicht tun, die bootstrap.css direkt zu bearbeiten - da Sie mit einer neueren Version Ihre Änderungen verlieren, gehen sie verloren. Sie haben jedoch die Möglichkeit, Ihre Bootstrap-Dateien anzupassen (auf ihrer Website befindet sich eine Seite zum Anpassen). Geben Sie einfach den Namen Ihrer Schriftart mit allen Fallback-Namen in das entsprechende Textfeld für die Typografie ein. Natürlich müssen Sie dies tun, wenn Sie eine neue oder aktualisierte Version Ihrer Bootstrap-Dateien erhalten.
Eine andere Möglichkeit besteht darin, die Bootstrap-Regeln in einem anderen Stylesheet zu überschreiben. Wenn Sie dies tun, müssen Sie lediglich Selektoren verwenden, die so spezifisch sind wie die Bootstrap-Selektoren (oder spezifischer als diese).
Hinweis: Wenn Sie sich für die Browserunterstützung interessieren, reicht eine einzelne EOT-Version Ihrer Schriftart möglicherweise nicht aus. Siehe http://caniuse.com/eot für eine Supporttabelle.

0
Onkel Toob