Semantic-ui: [Font] Inconsistent special characters

Created on 9 Aug 2017  路  6Comments  路  Source: Semantic-Org/Semantic-UI

capture

Inconsistent special character size and display.
Is there any specific font to update, or swap?

Cannot Fix
Source
picture mjasnikovs

All 6 comments

Hi @mjasnikovs, did you set @importGoogleFonts to false? Could you please post these strings from the screenshot in this thread?

awgv picture awgv on 9 Aug 2017

No

A膧E膾U弄I莫S艩G蘑L幕Z沤C膶N艆
mjasnikovs picture mjasnikovs on 9 Aug 2017

Thank you. I have a hunch why it鈥檚 inconsistent, but I鈥檒l need to check it鈥擨鈥檓 busy today, so I鈥檒l probably get back to you by tomorrow morning.

awgv picture awgv on 9 Aug 2017
👍1

@mjasnikovs So, SUI uses Google Fonts, and Google Fonts still uses a very outdated version of Lato font. I tried using the latest version that鈥檚 2.015, as you can see, it鈥檚 much better (2.015 is below):
sui

Lato isn鈥檛 ideal when it comes to diacritics, so if it鈥檚 an issue for you, maybe you鈥檒l have to use something else. In any case, the only way to fix it is to self-host the font. Open installation_folder/src/site/globals/site.variables, copy @importGoogleFonts: false; there, then copy the CSS below to site.overrides in the same folder and rebuild the framework. Hopefully, I didn鈥檛 mess up the unicode ranges, you might need to change it a bit if I did, and I also included cyrillic in case you need it.

/*-------------------------
      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;
}
awgv picture awgv on 10 Aug 2017

Thank you!

For anybody else who runs into this issue! You will have to add Lato fonts and icons font to your project manually. This is useful for projects which are running locally, without access to google required.

mjasnikovs picture mjasnikovs on 10 Aug 2017

I have made a fork for this issue : https://github.com/arthurlacoste/semantic-ui-offline

You cant use this for the css with fonts includes : 

npm i semantic-ui-offline
arthurlacoste picture arthurlacoste on 31 Oct 2017
👎1 👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments
larsbo picture larsbo  路  3Comments
kntmrkm picture kntmrkm  路  3Comments
zhaoyao91 picture zhaoyao91  路  3Comments
mixerp picture mixerp  路  3Comments