[vue]use semantic.min.css icon font error: Failed to decode downloaded font: http://localhost:10001/font/icons.woff2

[Dreampie]

App.vue

<style lang="stylus">
    @import './asset/semantic-ui/semantic.min.css';
</style>

other error: #4999
https://github.com/Dreampie/vuejs2-demo

[awgv]

@Dreampie the error can have many causes, and it’d suggest to go through some StackOverflow answers to see what might be causing it. Again, labeling the issue as a usage question, as it has nothing to do with the framework itself.

[Dreampie]

https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip font broken
download from here it's ok: http://semantic-ui.com/dist/themes/default/assets/fonts/icons.woff2

[awgv]

@Dreampie When was the last time you downloaded Semantic-Org/Semantic-UI-CSS archive? I’ve cloned your demo again to check it, the repository was updated to 2.2.7 only 3 days ago—the robot didn’t work before—and I overwrote the fonts in your demo with the fonts from the latest version that’s https://github.com/Semantic-Org/Semantic-UI-CSS/archive/2.2.7.zip, and it all works now.

[Dreampie]

thanks,google font can be download ?

[awgv]

@Dreampie what do you mean?

[Dreampie]

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin); replace to font file

[awgv]

If I understood you correctly, yes, you can self-host the font. You just need to go to src\site\globals\site.variables and put @importGoogleFonts: false; there to prevent the framework from downloading any Google Fonts.

[awgv]

Forgot to mention, you’ll also need to add @font-face rules to site.overrides that’s in the same folder, for example:

/*-------------------------
      Fonts Extension
-------------------------*/
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Regular.ttf') format('truetype');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* cyrillic */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Regular.ttf') format('truetype');
  unicode-range: U+04??, U+0500-052F, U+2DE0-2DFF, U+A640-A69F, U+1D2B-1D78;
}

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/Lato-Italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Italic.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/Lato-Italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Italic.ttf') format('truetype');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* cyrillic */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/Lato-Italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Italic.ttf') format('truetype');
  unicode-range: U+04??, U+0500-052F, U+2DE0-2DFF, U+A640-A69F, U+1D2B-1D78;
}

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Bold.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Bold.ttf') format('truetype');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* cyrillic */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Bold.ttf') format('truetype');
  unicode-range: U+04??, U+0500-052F, U+2DE0-2DFF, U+A640-A69F, U+1D2B-1D78;
}

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-BoldItalic.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-BoldItalic.ttf') format('truetype');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* cyrillic */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-BoldItalic.ttf') format('truetype');
  unicode-range: U+04??, U+0500-052F, U+2DE0-2DFF, U+A640-A69F, U+1D2B-1D78;
}

[Dreampie]

yes,you are right,but I'm not compile semantic-ui, download zip file not contains these font file,so I hope include to zip file like icons

[awgv]

@Dreampie then just download the font either from Google Fonts, or the official website (it’s actually a better choice, because Google Fonts hosts a very old version 1 of Lato, and it’s version 2.015 on the official website), and include the @font-face rules somewhere, it doesn’t really matter where.

The @font-face rules that I posted are a copy of what SUI uses, I actually used them in a project to self-host v2.015, so if you’ll download v2.015, include those rules, and copy the corresponding fonts from LatoLatin folder—the other folder contains the full Lato experience with the support of cyrillic glyphs that you probably don’t need.

[Dreampie]

thanks