question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

3 Fonts are downloaded instead of one ?

See original GitHub issue

Using this configuration in nuxt.config.js :

webfontloader: {
  google: {
    families: ['Roboto:300,400,500,700']
  }
}

I tried to build a simple app for production and run it with nuxt build then nuxt start.

And It seems that with the nuxt-webfontloader, the font is downloaded 3 times with a different name 😄 screenshot_1

Using the classic way without the module (using Nuxt config head object) results in : screenshot_2

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
manniLcommented, Nov 26, 2018

tl;dr

webfontloader: {
    google: {
      families: ['Lato:400,700:latin'] //set the subset here (eg. latin or cyrillic
    }
  },
1reaction
manniLcommented, Nov 26, 2018

@kevinmarrec NVM.

Look at the stylesheet (example for Lato):

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

This loads fonts for latin and latin extend.

Quote from the npm package.

If you need to specify character subsets other than the default (e.g.: greek script in addition to latin), you must append the subset string to the requested family string after a colon. The subset string should follow the Google documentation (subset names separated by commas):

WebFontConfig = {
  google: {
    families: ['Open Sans Condensed:300,700:latin,greek']
  }
};
Read more comments on GitHub >

github_iconTop Results From Across the Web

Third-party installed font does not appear in the font list in ...
Method 1 · Clear the font caches. · On the Edit menu, click Select Duplicated Fonts. · On the Edit menu, click Resolve...
Read more >
How to install multiple fonts at once, quick and easy - YouTube
This video will show you how to install several fonts, TrueType OpenType, ect... at one time with a simple drag and drop in...
Read more >
How to easily install multiple fonts? | Presentation Agency
1. Open the folder where your newly downloaded fonts are (extract the zip. files) ... 3. Select the fonts you want to install...
Read more >
How to easily install multiple fonts? | by 356labs
One -click way: Open the folder where your newly downloaded fonts are (extract the zip. files); If the extracted files are spread across...
Read more >
Do fonts get downloaded if they've already been @font-faced ...
Yes, and only the first format is downloaded, not all. In addition, they only get downloaded if they are used on an element...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found