Giulia Chiola's Blog

How to add Google Fonts in Vue Styleguidist

Giulia Chiola's photo
Giulia Chiola
·

3 min read

Few days ago I worked on a vue-styleguidist project and I had to use a Google Font.

Side note: vue-styleguidist is the "Vue version" of the more famous react-styleguidist, a component development environment with hot reloaded dev server and a living style guide.

In a static page, I would add the font in a classic way using a <link> tag:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Raleway:100,400,800">
    <style>
      h1 {
        font-family: 'Raleway', sans-serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Whoa! I'm in Raleway 📝</h1>
  </body>
</html>

But hey, in Styleguidist we are writing components into the "Styleguidist box" 📦!

Styleguidist takes care of creating the fancy and functional box around our components, while we only have to write what is strictly necessary for the component (its structure, its styles, and its logic)

To add a <head> property to the "Styleguidist box" we have to use the react-styleguidist template property which lets us change the HTML of the Styleguidist application.

To find out template supported properties, I deep dive into mini-html-webpack-template-plugin extended options. There I found that it is possible to add an head property with an array of links... awesome! 😼

NameTypeDefaultDescription
head.links{Array}undefinedArray of objects with key + value pairs

So, to add Raleway Google Font in our project we have to add to the styleguide.config.js file a template object:

// styleguide.config.js

module.exports = {
  title: 'My awesome styleguide',
  components: 'components/**/[A-Z]*.vue',
  ...
  template: {
    head: {
      links: [{
        key: 'stylesheet',
        value: 'https://fonts.googleapis.com/css?family=Raleway:100,400,800',
      }, ],
    },
  },
}

that turns out in

<head>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Raleway:100,400,800">
</head>

Now, in our components files we can use the Google Font 😏

// My component.vue

<template>
  <h1>My awesome title</h1>
</template>

<script>
  export default {
    name: 'MyComponent',
  }
</script>

<style>
  h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 48px;
  }
</style>
Vue.jsstyleguideJavaScriptfonts