Как изменить семейство шрифтов Bootstrap по умолчанию, используя шрифт от Google?

Я создаю блог-сайт, и я хочу изменить шрифт Bootstrap. В моем импортировании CSS в заголовке я добавил этот шрифт

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

Как я могу использовать это как мой шрифт по умолчанию для начальной загрузки?

Ответы

Ответ 1

Прежде всего, вы не можете импортировать шрифты в 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;
}

Ответ 2

Если вы используете Sass, то есть переменные Bootstrap, определенные с помощью !default, среди которых вы найдете семейства шрифтов. Вы можете просто установить переменные в своем собственном файле .scss перед включением файла Bootstrap Sass, и !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>

Ответ 3

Я думаю, что лучшим и самым чистым способом было бы получить пользовательскую загрузку бутстрапа.

http://getbootstrap.com/customize/

Затем вы можете изменить шрифты по умолчанию в Typography (в этой ссылке). После этого вы получите файл .Less, с помощью которого вы сможете вносить дальнейшие изменения в настройки по умолчанию.

Ответ 4

Если у вас есть файл custom.css, там просто сделайте что-то вроде:

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

Ответ 5

Другой способ - загрузить исходный код, а затем изменить следующие variables.less в 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

Ответ 6

bootstrap-live-customizer - хороший ресурс для настройки собственной темы бутстрапа и просмотра результатов в реальном времени по мере настройки. Используя этот сайт, очень просто редактировать шрифт, а затем загружать обновленный .css файл.

Ответ 7

Я знаю, что это поздний ответ, но вы можете вручную изменить 7 объявлений шрифтов в последней версии Bootstrap:

html {
  font-family: sans-serif;
}

body {
  font-family: sans-serif;
}

pre, code, kbd, samp {
  font-family: monospace;
}

input, button, select, optgroup, textarea {
  font-family: inherit;
}

.tooltip {
  font-family: sans-serif;
}

.popover {
  font-family: sans-serif;
}

.text-monospace {
  font-family: monospace;
}

Удачи.

Ответ 8

Это лучший и простой способ импортировать шрифт из Google, а
это также стандартный способ импорта шрифта

.Вставьте этот код на страницу индекса или в заголовок

<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);

в вашем файле Css задница этого кода

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

Примечание. Строка кода @import будет первой строкой в вашем CSS файле (style.css и т.д. css). Они могут использоваться в любом из файлов .css и всегда должны быть первой строкой в этих файлах. Ниже приведен пример: