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! 😼
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',
}, ],
},
},
}
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>
Top comments (0)