Search code examples
cssbootstrap-4fontsbootstrap-vue

Bootstrap-vue - colors and fonts difference between local and production server

I'm tinkering with a node.js + Vue 2 + Bootstrap-Vue backend/admin tool on a local Debian Linux machine (running under WSL, but that shouldn't matter I think). It's an 'add-on' to an existing git repository Vue project that contains client-facing pages.

I build it/webpack it, zip it, and scp it to a test server which is pure Debian, running Node.js. Only thing that is notably different between the rest of the Vue web app and this 'added' Admin.vue page is that I added bootstrap and bootstrap-vue via the main.js file so that it's available everywhere in case I want to re-vamp the rest of the site to use bootstrap-vue at a later date:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

On my local machine I see: enter image description here

but on the test server, that same page looks different. Different fonts, different tab colors at the top, different line spacing, form placeholder text is bold: enter image description here

All I do is unpack the zip that was copied over. Because there is a node-express module serving up the pages to whoever asks, the new html/bootstrap/vue code gets reloaded when I update it.

A little sleuthing with the WhatFont extension for Chrome shows different fonts being used (first image is from my localhost run of the app on my desktop via Chrome, second image is from the remote test server, also seen from my desktop via Chrome): enter image description here enter image description here

The page behaves the same in Edge and Firefox. Switch from localhost to server - BAM! different view(vue?).

It's perplexing in the sense that I left everything as 'default' in Bootstrap - which appears to use the SegoeUI font as a default font. But once the code is uploaded to the server, it acts as if the font is missing. I know I don't have the SegoeUI font on my developer desktop, so I assume it's in with the Bootstrap modules, "compiled" in with the app.js and chunk.js files that get served up. When I grep search the built code, I do see 'SegoeUI' buried in the obfuscated code.

Rest of the app is untouched - no Bootstrap spread there (yet). Uses the Monserrat Font primarily, with Arial as fallback.

Any ideas are appreciated. Or point me someplace that I can dig around to see if there is some 'development' versus 'production' flag set (I haven't found one yet) that might change the behavior. If anyone has run across this issue before, please enlighten me! Thanks in advance. More details on request.

Solution

  • You need to manually include your desired font in public/index.html

    // index.html
<head>
  <!-- ... -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <!-- ... -->
</head>

    And in style define the connected font. You can define it in any file, depending on your structure.

    // example in App.vue
<template>
  <!-- ... -->
</template>

<script>
  export default {
    <!-- ... -->
  }
</script>

<style>
  body {
    font-family: Open Sans, sans-serif;
  }
</style>

    You can also download and locally connect fonts

    Why do you see this behavior? Obviously, the library(bootstrap) uses the default fonts (those that are in the system), and if one of them is not available, the next one is used. I have not seen confirmation that he is downloading it locally or publicly.