Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Font] Inconsistent special characters #5642

Closed
mjasnikovs opened this issue Aug 9, 2017 · 7 comments
Closed

[Font] Inconsistent special characters #5642

mjasnikovs opened this issue Aug 9, 2017 · 7 comments
Labels
Cannot Fix

Comments

@mjasnikovs
Copy link

capture

Inconsistent special character size and display.
Is there any specific font to update, or swap?
@awgv
Copy link
Member

awgv commented Aug 9, 2017

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

@mjasnikovs
Copy link
Author

No

aāeēuūiīsšgģlļzžcčnņ
AĀEĒUŪIĪSŠGĢLĻZŽCČNŅ

@awgv
Copy link
Member

awgv commented Aug 9, 2017

Thank you. I have a hunch why it’s inconsistent, but I’ll need to check it—I’m busy today, so I’ll probably get back to you by tomorrow morning.

@awgv
Copy link
Member

awgv commented Aug 10, 2017

@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’s 2.015, as you can see, it’s much better (2.015 is below):
sui

Lato isn’t ideal when it comes to diacritics, so if it’s an issue for you, maybe you’ll 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’t 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 awgv closed this as completed Aug 10, 2017
@mjasnikovs
Copy link
Author

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 mjasnikovs mentioned this issue Aug 10, 2017
Open
@arthurlacoste
Copy link

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

@awgv awgv mentioned this issue Nov 9, 2017
Closed
@zhangyuanliang zhangyuanliang mentioned this issue Jun 19, 2018
Closed
@lubber-de

This comment was marked as spam.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Cannot Fix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@awgv @mjasnikovs @arthurlacoste @lubber-de