https://github.com/ooloth/subfont-demo
A demonstration of the subfont font-weight issue that occurs when new characters are dynamically added to the page.
https://github.com/ooloth/subfont-demo
Last synced: 6 months ago
JSON representation
A demonstration of the subfont font-weight issue that occurs when new characters are dynamically added to the page.
- Host: GitHub
- URL: https://github.com/ooloth/subfont-demo
- Owner: ooloth
- License: mit
- Created: 2019-01-14T20:38:39.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-14T20:44:08.000Z (about 7 years ago)
- Last Synced: 2025-06-02T08:43:50.699Z (10 months ago)
- Language: CSS
- Homepage:
- Size: 128 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Subfont Font-Weight Issue (Example Project)
This project is an example of the default Gatsby starter (although I no longer believe React/Gatsby are relevant to the issue).
The example text is styled using the Google Font `Lora` and subset using `subset`.
The class `.lora` is declared at `line 1` of `src/components/layout.css`).
The `link` tag for the Google Font (which includes the font-weights `400` and `700`) is at `line 30` of `src/components/layout.js`.
The example paragraphs are at `line 20` of `src/pages/index.js` (in case you want to adjust change their font-weights).
## To view development version (pre-subfont):
Run the following:
```sh
cd subfont-test
gatsby develop
```
Then, navigate to `http://localhost:8000` to view the site in your browser.
## To view the built version (post-subfont)
Run the following:
```sh
gatsby build && subfont public -i --inline-css && gatsby serve
```
Then, navigate to `http://localhost:9000` to view the site in the browser.
## What you will see
1. Subfont works well for the statically rendered characters.
2. When new characters are dynamically added to the page, subfont loads the correct font for every character.
3. If all font-weights used in the dynamically-added content __are also present__ in the static HTML, all characters in the dynamically-added content render correctly.
4. However, __if a new font-weight appears__ in the dynamically-added content:
1. __New characters__ that use the new font-weight will display correctly, but
2. __REUSED characters__ (i.e. characters also present in the static HTML) that use the new font-weight __will (incorrectly) retain the font-weight used in the static HTML__ (i.e. they will NOT use the new font-weight).
## Conclusion
The issue is not due to the original font not being used by the new characters: the font is being used by all characters as expected.
The actual issue is actually that when a new font-weight is used for dynamically-added content, the wrong `font-weight` is applied to any characters that also exist in the static HTML.