Request - Version with local fonts

Question

Request - Version with local fonts

neilmispelaar opened this issue 3 years ago · 2 comments

Hello,

Description of ask

Is there version of GCWeb that has the local font files baked into the dist package so that the client doesn't make a public call to Google Fonts?

Case in point - the following file makes a call to fonts.googleapis.com
https://github.com/wet-boew/GCWeb/blob/master/sites/baseline/_font.scss

Backgrounder

We have an internal application that can't make calls to the public internet and so it would be great to have a "local" version of GCWeb with these fonts and the fontawesome css bundled.

As a work around, I'm going to bring the fonts in manually into our project and update the minified css in the GCWeb dist, but maybe there is an opportunity to bundle them in the future?

Answer 1 · 2021-11-25T02:54:51.000Z

If there is value in bringing this in locally here is the CSS (that incorporates more robust browser support) and the font files below.

This CSS was generated using the https://google-webfonts-helper.herokuapp.com/fonts web site.

Font files

fonts.zip

CSS to bring in the fonts (paths need to be adjusted)

/* noto-sans-regular - latin-ext_latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-sans-v21-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/noto-sans-v21-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/noto-sans-v21-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/noto-sans-v21-latin-ext_latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-italic - latin-ext_latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/noto-sans-v21-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/noto-sans-v21-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/noto-sans-v21-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/noto-sans-v21-latin-ext_latin-italic.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700 - latin-ext_latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/noto-sans-v21-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/noto-sans-v21-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/noto-sans-v21-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/noto-sans-v21-latin-ext_latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700italic - latin-ext_latin */
@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/noto-sans-v21-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/noto-sans-v21-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/noto-sans-v21-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/noto-sans-v21-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/noto-sans-v21-latin-ext_latin-700italic.svg#NotoSans') format('svg'); /* Legacy iOS */
}


/* lato-regular - latin-ext_latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/lato-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/lato-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/lato-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/lato-v20-latin-ext_latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin-ext_latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/lato-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/lato-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/lato-v20-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/lato-v20-latin-ext_latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin-ext_latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/lato-v20-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/lato-v20-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/lato-v20-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/lato-v20-latin-ext_latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700italic - latin-ext_latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/lato-v20-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''), url('../fonts/lato-v20-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/lato-v20-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/lato-v20-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/lato-v20-latin-ext_latin-700italic.svg#Lato') format('svg'); /* Legacy iOS */
}

Answer 2 · 2022-01-27T03:10:01.000Z

@neilmispelaar there is no short term intent to bundle it into GCWeb. But if you have time, we can probably figure out something. I am open to suggestion where we can leverage external cdn first and detect/use a local fallback if needed.
Feel free to join us during one of our weekly code sprint - https://github.com/wet-boew/wet-boew/wiki/WET-BOEW-Code-sprint