Developmint / Nuxt Webfontloader
Licence: mit
Efficient web font loading has never been easier!
Stars: ✭ 264
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Nuxt Webfontloader
nuxt-speedkit
nuxt-speedkit will help you to improve the lighthouse performance score (100/100) of your website.
Stars: ✭ 401 (+51.89%)
Mutual labels: font, nuxt, nuxtjs
isnuxt3ready
A community-built compatibility guide for Nuxt 3 modules
Stars: ✭ 106 (-59.85%)
Mutual labels: nuxt, nuxtjs
admin-null-nuxt
Admin Null — Free Nuxt Bulma Admin Dashboard (with dark mode)
Stars: ✭ 39 (-85.23%)
Mutual labels: nuxt, nuxtjs
nuxt-star-admin-extra
Admin Template base on Vue StarAdmin with improved on design and served using Nuxt.js
Stars: ✭ 19 (-92.8%)
Mutual labels: nuxt, nuxtjs
nuxt-i18n-boilerplate
A boilerplate for rapid application development using Nuxt i18n.
Stars: ✭ 20 (-92.42%)
Mutual labels: nuxt, nuxtjs
nuxt-mobile-detect
Nuxt mobile and device detection plugin for client side and SSR
Stars: ✭ 24 (-90.91%)
Mutual labels: nuxt, nuxtjs
global-components
Module to register global components for Nuxt.js
Stars: ✭ 57 (-78.41%)
Mutual labels: nuxt, nuxtjs
awrora-starter
Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.
Stars: ✭ 38 (-85.61%)
Mutual labels: nuxt, nuxtjs
admin-one-nuxt
Admin One Nuxt - Nuxt.js Bulma Buefy admin dashboard
Stars: ✭ 23 (-91.29%)
Mutual labels: nuxt, nuxtjs
task-manager
Open-source task manager based on Kanban. Made with vue.js, koa2, mongodb\mongoose.
Stars: ✭ 23 (-91.29%)
Mutual labels: nuxt, nuxtjs
nuxt-babel
Use normal .babelrc file with your Nuxt app
Stars: ✭ 32 (-87.88%)
Mutual labels: nuxt, nuxtjs
nuxt-blog
📝 Personal blog built with Nuxt.js and wordpress rest api
Stars: ✭ 13 (-95.08%)
Mutual labels: nuxt, nuxtjs
date-fns-module
Modern JavaScript date utility library - date-fns for Nuxt.js
Stars: ✭ 68 (-74.24%)
Mutual labels: nuxt, nuxtjs
Nuxt Webfontloader - Efficient web font loading has never been easier!
Features
- Full support of SVGs as components. Import them like your Vue SFCs
- Built on top of Google's/Typekit's webfontloader
- Improves site performance by loading web-fonts asynchronously
- Nuxt 2 (and only Nuxt 2) support
- Fully tested!
Setup
- Add
nuxt-webfontloader
as a dependency using yarn or npm to your project - Add
nuxt-webfontloader
tomodules
section ofnuxt.config.js
{
modules: [
'nuxt-webfontloader',
],
}
- Include your webfontloader options in the
nuxt.config.js
, for example:
export default {
webfontloader: {
google: {
families: ['Lato:400,700'] //Loads Lato font with weights 400 and 700
}
},
}
- Remove old stylesheets from your app template or
nuxt.config.js
head part:
export default {
head:{
link: [
// You don't need that line anymore!
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Lato:400,700' }
]
}
}
Adding Google Fonts with Font Display option
If you like to use Goggle Fonts with font-display option, this is possible.
But there is a small difference if you want to add only one Font Family or more than one.
Here an example for adding one font family with font-display option:
export default {
webfontloader: {
google: {
// Loads Open Sans font with weights 300 and 400 + display font as swap
families: ['Open+Sans:300,400,600&display=swap']
}
},
}
Here an example for adding more font families with font-display option:
export default {
webfontloader: {
// add Google Fonts as "custom" | workaround required
custom: {
families: [
'Open Sans:n3,n4',
'Roboto:n3,n7'
],
urls: [
// for each Google Fonts add url + options you want
// here add font-display option
'https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap',
'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
]
}
},
}
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Alexander Lichter
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].