File tree Expand file tree Collapse file tree 1 file changed +44
-2
lines changed Expand file tree Collapse file tree 1 file changed +44
-2
lines changed Original file line number Diff line number Diff line change 11# Nuxt Webfontloader - Efficient web font loading has never been easier!
2-
2+
33[ ![ npm (scoped with tag)] ( https://img.shields.io/npm/v/nuxt-webfontloader/latest.svg?style=flat-square )] ( https://npmjs.com/package/nuxt-webfontloader )
44[ ![ npm] ( https://img.shields.io/npm/dt/nuxt-webfontloader.svg?style=flat-square )] ( https://npmjs.com/package/nuxt-webfontloader )
55[ ![ Build Status] ( https://travis-ci.com/Developmint/nuxt-webfontloader.svg?branch=master )] ( https://travis-ci.com/Developmint/nuxt-webfontloader )
3333}
3434```
3535
36- - Include your webfontloader options in the ` nuxt.config.js ` , for example:
36+ - Include your webfontloader options in the ` nuxt.config.js ` , for example:
3737
3838``` js
3939export default {
@@ -59,6 +59,48 @@ export default {
5959}
6060```
6161
62+ ## Adding Google Fonts with Font Display option
63+
64+ If you like to use Goggle Fonts with font-display option, this is possible.
65+
66+ ** But there is a small difference if you want to add only one Font Family or more than one** .
67+
68+ Here an example for adding ** one font family** with font-display option:
69+
70+ ``` js
71+ export default {
72+ webfontloader: {
73+ google: {
74+ // Loads Open Sans font with weights 300 and 400 + display font as swap
75+ families: [' Open+Sans:300:400:600&display=swap' ]
76+ }
77+ },
78+ }
79+
80+ ```
81+
82+ Here an example for adding ** more font families** with font-display option:
83+
84+ ``` js
85+ export default {
86+ webfontloader: {
87+ // add Google Fonts as "custom" | workaround required
88+ custom: {
89+ families: [
90+ ' Open Sans:n3,n4' ,
91+ ' Roboto:n3,n7'
92+ ],
93+ urls:
94+ // for each Google Fonts add url + options you want
95+ // here add font-display option
96+ ' https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap'
97+ ' https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
98+ ]
99+ }
100+ },
101+ }
102+ ```
103+
62104## Development
63105
64106- Clone this repository
You can’t perform that action at this time.
0 commit comments