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

Can't you simply remove the first line from the custom bootswatch theme you downloaded (assuming you downloaded the css file, like this one http://bootswatch.com/flatly/bootstrap.css)?

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

This should make it fall back to a font that it can use.

Answer 2

Why don't you just download the font you wish to use i.e. OpenSans, place it in a sub folder named "fonts" or something like that then use something like this...

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

Answer 3

If you don't want to edit your bootstrap css for any reason(for me it was injected from jar file by wro4j) then you can override the 'font-family' in your own css with your desired one and then include that css file in your web application with higher priority.

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

body {
  font-family: myfont !important;
}

PA: if you are using wro4j, then your new css must be upper than the bootstrap webjar. This is a sample 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>