web-dev-qa-db-ja.com

Googleのフォントを使用してBootstrapデフォルトのフォントファミリを変更するにはどうすればよいですか？

ブログサイトを作成していますが、Bootstrapフォントを変更したいです。インポートCSSのヘッダーにこのフォントを追加しました

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

これをbootstrapデフォルトフォントとして使用するにはどうすればよいですか？

htmlcsstwitter-bootstrapfonts
44
user3651129

まず、CSSにそのようにフォントをインポートすることはできません。

このコードをHTMLヘッドに追加できます。

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

または、次のようなCSSファイルにインポートします。

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

次に、bootstrap.cssで本文のフォントファミリを編集するか、新しいフォントファミリを追加できます。

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

Sass を使用すると、Bootstrap変数が!defaultで定義され、その中にフォントファミリがあります。 Bootstrap Sassファイルを含める前に、独自の.scssファイルに変数を設定するだけで、!defaultはユーザーのファイルを上書きしません。 !defaultがどのように機能するかについての良い説明は次のとおりです。 https://thoughtbot.com/blog/sass-default 。

Bootstrap 4 、 npm 、 Gulp 、 gulp-sass および gulp- cssmin これを一緒に接続する方法のアイデアを提供します。

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

最善かつ最もクリーンな方法は、ブートストラップのカスタムダウンロードを取得することだと思います。

http://getbootstrap.com/customize/

次に、（そのリンクの）Typographyでfont-defaultsを変更できます。これにより、後でデフォルトをさらに変更できる.Lessファイルが得られます。

28
punkologist

custom.cssファイルがある場合は、次のようなことをしてください：

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

もう1つの方法は、 ソースコード をダウンロードして、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;

そして、それを.cssファイルにコンパイルします

5
Nicolai

bootstrap-live-customizer は、独自のbootstrapテーマをカスタマイズし、カスタマイズ時に結果をライブ表示するための優れたリソースです。このWebサイトを使用すると、フォントを編集して、更新された.cssファイルをダウンロードするだけです。

2
Lewis James-Odwin