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.

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

Adding google font as a local asset, fixing missing font-face, adding… #41

Merged
merged 2 commits into from
May 19, 2020

Conversation

HotEmu
Copy link
Contributor

@HotEmu HotEmu commented Apr 10, 2020

Fixes #39 and #40

  • Add Google Font as local asset.
  • Fixes missing @font-face.
  • Adds Arial as fall back.

Added 10 font files (.svg, .woff, .woff2, .eot,), when fetched from CDN, Google sends a file based on user agent, we need all file types that are used by various browsers.
Added Arial to font-family when Libre Franklin is unavailable. (TODO for the future, we may want to just modify font-family in one place in CSS that will cover all DOM elements such as: a, h1, h2...).
WebPack moves font files to a font folder, used "include" option because our fonts have .svg file, which normally WebPack would treat as any other image, but in our case, we need to keep it in the fonts folder.

Crossbrowser explanation for font-family:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes /
src: url('webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('webfont.woff2') format('woff2'), / Super Modern Browsers /
url('webfont.woff') format('woff'), / Pretty Modern Browsers /
url('webfont.ttf') format('truetype'), / Safari, Android, iOS /
url('webfont.svg#svgFontName') format('svg'); / Legacy iOS */
}

@leifj leifj merged commit 2323af4 into TheIdentitySelector:master May 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Missing @font-face
2 participants