DEV Community

Giulia Chiola
Giulia Chiola

Posted on • Originally published at giuliachiola.dev

How to add Google Fonts in Vue Styleguidist

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>
Enter fullscreen mode Exit fullscreen mode

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! 😼

Name Type Default Description
head.links {Array} undefined Array 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',
      }, ],
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

that turns out in

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

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)