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?

Can you just go into the Bootswatch source and comment out the Google Font reference? — J Max, Nov 27 '15 at 16:39

score 4 · Accepted Answer · answered Nov 27 '15 at 16:44

4

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.

answered Nov 27 '15 at 16:44

Andrei Olariu

556
4
8

No problem. If you really care for the theme font, you can do what @blairmeister suggested. Download the font from google or wherever and replace the first line in the css file with the font-face as in his answer. Make sure you preserve the font-family name to the original name found in the theme. – Andrei Olariu Nov 27 '15 at 17:05

score 0 · Answer 2 · answered Nov 27 '15 at 16:41

0

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

answered Nov 27 '15 at 16:41

blairmeister

915
1
6
16

score 0 · Answer 3 · answered Aug 21 '17 at 13:46

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>

Bootstrap CSS without Google Fonts

3 Answers3

Linked