Last active
June 26, 2021 10:18
-
-
Save adammcfadden/be35054aaab5c36ab421282e3399a4e3 to your computer and use it in GitHub Desktop.
Vue component for loading minimal fonts with webfontloader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Vue component for loading minimal fonts with webfontloader | |
<template> | |
</template> | |
<script> | |
//https://github.com/typekit/webfontloader | |
import WebFontLoader from 'webfontloader'; | |
export default { | |
created() { | |
WebFontLoader.load({ | |
custom: { | |
// Use FVD notation to include families https://github.com/typekit/fvd | |
families: ['Rubik:n4,n5,n7'], | |
// Path to stylesheet that defines font-face | |
urls: ['/static/assets/fonts/stylesheet.css'], | |
}, | |
active: this.setFontLoaded, | |
}); | |
}, | |
methods: { | |
setFontLoaded() { | |
this.$emit('font-loaded'); | |
}, | |
}, | |
}; | |
</script> |
Thanks, it's working. I used that snippet in App.vue.
WebFontLoader.load({ custom: { families: ['Material Icons'] }, active: this.setFontLoaded })
I am using vuetify theme so I don't need to include css here, because it's alreday loaded.
Please help me !
I have error message
"window is not defined"
it's not work on SSR, and yes "window is not defined"
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Perfect 👍