web-dev-qa-db-fra.com

Comment modifier la famille de polices par défaut Bootstrap _ à l'aide de la police de Google?

Je crée un site de blog et je souhaite modifier la police Bootstrap. Dans mon CSS d'importation dans l'en-tête, j'ai ajouté cette police.

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

Comment puis-je l'utiliser comme ma police par défaut bootstrap?

htmlcsstwitter-bootstrapfonts
44
user3651129

Tout d'abord, vous ne pouvez pas importer des polices dans CSS de cette façon.

Vous pouvez ajouter ce code en tête HTML:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

ou l'importer en fichier CSS comme ceci:

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

Ensuite, dans votre fichier bootstrap.css, vous pouvez modifier la famille de polices de body ou en ajouter une nouvelle:

body {
  font-family: 'Oswald', sans-serif !important;
}
59
otopic

Si vous utilisez Sass , il existe Bootstrap variables sont définies avec !default, parmi lesquelles vous trouverez des familles de polices. Vous pouvez simplement définir les variables dans votre propre fichier .scss avant d'inclure le fichier Bootstrap Sass et !default ne remplacera pas le vôtre. Voici une bonne explication du fonctionnement de !default: https://thoughtbot.com/blog/sass-default .

Voici un exemple non testé utilisant Bootstrap 4 , npm , Gulp , gulp-sass et gulp- cssmin pour vous donner une idée de la façon dont vous pourriez relier cela ensemble.

package.json 

{
  "devDependencies": {
    "bootstrap": "4.0.0-alpha.6",
    "gulp": "3.9.1",
    "gulp-sass": "3.1.0",
    "gulp-cssmin": "0.2.0"
  }
}

mysite.scss 

@import "./myvariables";

// Bootstrap
@import "bootstrap/scss/variables";
// ... need to include other bootstrap files here.  Check node_modules\bootstrap\scss\bootstrap.scss for a list

_ myvariables.scss 

// For a list of Bootstrap variables you can override, look at node_modules\bootstrap\scss\_variables.scss

// These are the defaults, but you can override any values
$font-family-sans-serif: -Apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:       $font-family-sans-serif !default;

gulpfile.js 

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    cssmin = require("gulp-cssmin");

gulp.task("transpile:sass", function() {
    return gulp.src("./mysite.scss")
        .pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError))
        .pipe(cssmin())
        .pipe(gulp.dest("./css/"));
});

index.html 

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mysite.css" />
    </head>
    <body>
        ...
    </body>
</html>
39
Nelson Rothermel

Je pense que le meilleur moyen serait d’obtenir un téléchargement personnalisé de bootstrap.

http://getbootstrap.com/customize/

Vous pouvez ensuite modifier les valeurs par défaut de la police dans la typographie (dans ce lien). Cela vous donne ensuite un fichier .Less que vous pouvez modifier ultérieurement avec les valeurs par défaut.

28
punkologist

Si vous avez un fichier custom.css, faites-y simplement quelque chose comme:

font-family: "Oswald", Helvetica, Arial, sans-serif!important;
15
Ali Gajani

Une autre méthode consiste à télécharger code source puis à modifier les variables suivantes dans variables.less

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

Et compilez-le ensuite dans le fichier .css

5
Nicolai

bootstrap-live-customizer est une bonne ressource pour personnaliser votre propre thème bootstrap et voir les résultats en direct à mesure que vous personnalisez. En utilisant ce site, il est très facile de modifier la police, puis de télécharger le fichier .css mis à jour.

2
Lewis James-Odwin