Skip to content

Commit

Permalink
feat(site): offline lato 2.0, systemfonts, no googleimport by default
Browse files Browse the repository at this point in the history
This PR bundles the recent Lato 2.0 Font. It uses the same styles as the previous googleFonts Import does.

This fixes possible GDPR issues as the default theme now disables googlefont import.

I implemented a new variable @fonts which allows for a totally free description of font faces to be imported if needed. Each declared property will be used, so one can customize them as needed by that single variable.

Disabling the whole import can be done via @importFont: false or setting @font: {} or setting @fontName: '' just as one likes.
The new variables for unicode or font properties are done to simplify the default import and of course if one just wants to adjust them without redeclaring the whole @font variable mixin.

I also added @supportIE which allows to disable the woff-font import, as all other supported browsers support woff2 already.

This new variable and also the icon font-face will be adjusted accordingly in a separate PR... in case you might ask/wonder 😉

The default theme uses Lato-Latin 2.0 now which is smaller in size but includes the most important glyphs for European Latin-based languages which were missing in Lato v1 (via googlefonts) like in "Řeřicha"
It also uses Lato with Greek+Cyrillic+Extended 2.0 via unicode-range property which makes sure the font is only loaded when related characters are used inside the page.
If no character matches at all, the system fonts will be used as fallback.

I created the unicode ranges by analyzing the fonts character ranges using fontforge/fontforge

I also added an optional theme to adjust the font via a change in theme.config:

systemfont (which completely disables any font import and uses the platform system fonts only instead AND adjusts the bold setting so the overall visual appearance is very similar) See comments below for more info.
The used Lato fonts are available free of charge under the SIL Open Font License from http://www.latofonts.com
  • Loading branch information
lubber-de committed May 29, 2022
1 parent 28948f4 commit 054fffa
Show file tree
Hide file tree
Showing 22 changed files with 132 additions and 6 deletions.
15 changes: 13 additions & 2 deletions src/theme.less
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,19 @@
Fonts
-------------------*/

.loadFonts() when (@importGoogleFonts) {
@import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
.loadFonts() {
& when (@importGoogleFonts) {
@import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
}
& when (@importFonts) and not (@fontName = ''){
each(@fonts, {
@font-face {
each(@value,{
@{key}: @value;
});
}
})
}
}

/*------------------
Expand Down
1 change: 1 addition & 0 deletions src/themes/amazon/globals/site.variables
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@fontSize : 13px;
@fontName : 'Arial';
@importGoogleFonts : false;
@importFonts: false;

@h1: 2.25em;

Expand Down
Binary file added src/themes/default/assets/fonts/Lato-Bold.woff
Binary file not shown.
Binary file added src/themes/default/assets/fonts/Lato-Bold.woff2
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added src/themes/default/assets/fonts/Lato-Italic.woff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
103 changes: 99 additions & 4 deletions src/themes/default/globals/site.variables
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,113 @@
*******************************/

@import "variation.variables";
@supportIE: true;

/*-------------------
Fonts
--------------------*/

@fontName : 'Lato';

@headerFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@fontFileNameLatin : 'LatoLatin';
@fontFileNameSupplement: 'Lato';

// based on https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L577 list
@fallbackFonts : system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

@headerFont : @fontName, @fallbackFonts;
@pageFont : @fontName, @fallbackFonts;

@fontDisplay : swap;
@textRendering : optimizeLegibility;
@unicodeRangeLatin : U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
@unicodeRangeSupplement : U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;

@importFonts : true;
@fonts: {
@regularLatin: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameLatin}-Regular.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Regular.woff") format('woff'));
font-style : normal;
font-weight : @normal;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeLatin;
};
@boldLatin: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameLatin}-Bold.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Bold.woff") format('woff'));
font-style : normal;
font-weight : @bold;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeLatin;
};
@italicLatin: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameLatin}-Italic.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Italic.woff") format('woff'));
font-style : italic;
font-weight : @normal;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeLatin;
};
@boldItalicLatin: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff") format('woff'));
font-style : italic;
font-weight : @bold;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeLatin;
};
@regularSupplement: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff") format('woff'));
font-style : normal;
font-weight : @normal;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeSupplement;
};
@boldSupplement: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff") format('woff'));
font-style : normal;
font-weight : @bold;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeSupplement;
};
@italicSupplement: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff") format('woff'));
font-style : italic;
font-weight : @normal;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeSupplement;
};
@boldItalicSupplement: {
font-family: @fontName;
src: url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2") format('woff2')
if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff") format('woff'));
font-style : italic;
font-weight : @bold;
font-display : @fontDisplay;
text-rendering : @textRendering;
unicode-range : @unicodeRangeSupplement;
};
};

@googleFontName : @fontName;
@importGoogleFonts : true;
@importGoogleFonts : false;
@googleFontSizes : 'ital,wght@0,400%3B0,700%3B1,400%3B1,700';
@googleSubset : 'latin';
@googleFontDisplay : 'swap';
Expand Down
1 change: 1 addition & 0 deletions src/themes/github/globals/site.variables
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@fontSize : 13px;
@fontName : 'Arial';
@importGoogleFonts : false;
@importFonts: false;

@h1: 2.25em;

Expand Down
8 changes: 8 additions & 0 deletions src/themes/systemfont/globals/reset.overrides
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/*******************************
Overrides
*******************************/

b,
strong {
font-weight: 600;
}
10 changes: 10 additions & 0 deletions src/themes/systemfont/globals/site.variables
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*******************************
User Global Variables
*******************************/

@fontName : '';
@headerFont : @fallbackFonts;
@pageFont : @fallbackFonts;
@importGoogleFonts : false;
@importFonts : false;
@bold : 600;

0 comments on commit 054fffa

Please sign in to comment.