Utiliser une police différente avec bootstrap twitter

je veux utiliser une police différente pour mon site, qui n'est pas un webfont. J'ai déjà créé des fichiers EOT. Maintenant, comment puis-je intégrer ces polices avec bootstrap twitter ? Quelqu'un peut-il aider ?

Merci

32
demandé sur zessx 2013-09-11 16:07:06

5 réponses

la façon la plus facile que j'ai vu est d'utiliser Google Fonts.

allez sur Google Fonts et choisissez une police, puis Google vous donnera un lien pour mettre dans votre HTML.

Google's link to your font

puis ajoutez ceci à votre coutume.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;
}
48
répondu Kyle Pennell 2017-11-10 21:53:13

vous pouvez trouver un customizer sur le site officiel, qui vous permet de définir quelques moins de variables, comme @font-family-base. Liez vos polices personnalisées dans votre mise en page, et utilisez votre style bootstrap personnalisé généré.

Lien ici

Pour un exemple avec le @font-face règle, en utilisant le format WOFF (ce qui est assez bon pour la compatibilité du navigateur), ajouter ce CSS dans votre app.css le fichier et inclure votre custom boostrap.css fichier.

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

Veuillez noter que Proxima Nova est sous licence.

12
répondu zessx 2013-09-11 12:28:12

Salut Vous pouvez créer un build personnalisé sur bootstrap, 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 un lien vers votre page. Ou vous pouvez utiliser des générateurs de polices.

3
répondu Mon Noval 2013-09-11 12:28:14

Vous pouvez personnaliser twitter bootstrap fichier css, ouvrir le bootstrap.css fichier sur un éditeur de texte, et de changer la font-Famille avec votre nom de police et de le sauvegarder.

OU bien http://getbootstrap.com/customize/ et faire un personnalisé twitter bootstrap

2
répondu Able Alias 2013-09-11 12:10:36

tout d'Abord, vous devez inclure votre police dans votre site web (ou votre CSS, pour être plus précis) en utilisant le @font-face la règle.

À partir de là, il y a plusieurs façons de procéder. Une chose que je voudrais faire est de modifier le fichier de bootstrap.css directement - depuis que vous obtenez une nouvelle version vos changements seront perdus. Vous avez cependant la possibilité de personnaliser vos fichiers bootstrap (il y a une page de personnalisation sur leur site web). Entrez juste le nom de votre police avec tous les noms de repli dans la zone de texte typographique correspondante. Bien sûr, vous devrez le faire à chaque fois que vous obtenez une version nouvelle ou mise à jour de vos fichiers bootstrap.

Une autre chance que vous avez est d'écraser les règles bootstrap dans une feuille de style différente. Si vous faites cela, vous n'avez qu'à utiliser des sélecteurs aussi spécifiques (ou plus spécifiques) que les sélecteurs bootstrap.

Note latérale: si vous vous souciez de la prise en charge du navigateur une seule version EOT de votre police pourrait ne pas être suffisant. Voir http://caniuse.com/eot pour une table de service.

0
répondu Onkel Toob 2013-09-11 12:23:39