web-dev-qa-db-fra.com

Utiliser une police différente avec Twitter Bootstrap

Je souhaite utiliser une police différente pour mon site Web, qui n'est pas une webfont régulière. J'ai déjà créé des fichiers EOT. Maintenant, comment puis-je intégrer ces polices au bootstrap de Twitter? Quelqu'un peut-il aider?

Merci

csshtml5twitter-bootstrapresponsive-designtwitter-bootstrap-3
32
dxenaretionx

Le moyen le plus simple que j'ai vu consiste à utiliser Google Fonts .

Allez sur Google Fonts et choisissez une police, puis Google vous donnera un lien pour insérer votre code HTML.

Google's link to your font

Ajoutez ensuite ceci à votre custom.css:

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

ou

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

Vous pouvez trouver un personnalisateur sur le site officiel, qui vous permet de définir certaines variables LESS, sous la forme @font-family-base. Liez vos polices personnalisées dans votre mise en page et utilisez votre style de bootstrap généré personnalisé.

Lien ici

Pour un exemple avec la règle @font-face, utilisant le format WOFF (ce qui est très bon pour la compatibilité de navigateur), ajoutez ce CSS dans votre fichier app.csset incluez votre fichier boostrap.css personnalisé.

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

S'il vous plaît noter Proxima Nova est sous une licence.

12
zessx

Bonjour, vous pouvez créer une compilation personnalisée au démarrage, il suffit de changer le nom de la police dans les pages suivantes

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

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

Après cela, assurez-vous d’utiliser correctement @ font-face dans un fichier css et de le lier à votre page. Ou vous pouvez utiliser des générateurs de kit de polices.

3
Mon Noval

vous pouvez personnaliser le fichier css de démarrage de Twitter, ouvrir le fichier bootstrap.css dans un éditeur de texte, puis modifier la famille de polices avec votre nom de police et la sauvegarder.

OU arrivé à http://getbootstrap.com/customize/ et créer un bootstrap Twitter personnalisé

2
Able Alias