html - Bootstrap CSS without Google Fonts

Question

I am writing a simple offline web app to configure a device (think similar to a wireless router setup page).

The computer that is connected to my device won't have an internet connection, it will be loading the page from a server running on my device.

I've built the page using a Bootswatch override of Bootstrap.css because that is a library I'm familiar with. However, my page load hangs because the browser tries to retrieve Google Fonts but obviously can't.

Is there a version of Bootstrap.css which does not use Google Fonts, or is there a way that I can override them?

Answer 1

您不能简单地从您下载的自定义 bootswatch 主题中删除第一行（假设您下载了 css 文件，就像这个http://bootswatch.com/flatly/bootstrap.css一样）？

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

这应该使它回退到它可以使用的字体。

Answer 2

如果您出于任何原因不想编辑引导 css（对我来说，它是由 wro4j 从 jar 文件中注入的），那么您可以用所需的 css 覆盖您自己的 css 中的“font-family”，然后包含该 css 文件在您的 Web 应用程序中具有更高的优先级。

@font-face {
font-family: "myFont";
src: url("/fonts/myFont.ttf");
}

body {
  font-family: myfont !important;
}

PA：如果您使用的是 wro4j，那么您的新 css 必须高于 bootstrap webjar。这是一个示例 wro.xml：

<group name="main">
  <css>/styles/my.css</css>
  <css>classpath:META-INF/resources/webjars/bootswatch-spacelab/3.3.1+2/css/bootstrap.min.css</css>
</group>

Answer 3

你为什么不直接下载你想使用的字体，即 OpenSans，把它放在一个名为“fonts”或类似的子文件夹中，然后使用类似这样的东西......

@font-face {
  font-family: "OpenSans";
  src: url("/fonts/Opensans.ttf");
}