Load IBM fonts via Google Fonts #241
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Eric-Arellano
commented
Mar 31, 2023
Comment on lines
+3
to
+5
| /* Import IBM Plex Sans and IBM Plex Mono, at regular 400 and bold 700, italics for both. For | ||
| IBM Plex Sans, also include font weights 500 and 600 (non-italics), which are used in table of | ||
| contents. */ |
There was a problem hiding this comment.
I wasn't totally sure how to reason about this. For example:
- should Mono have 500 and 600?
- should Sans have italics for 500 and 600? Which seem to be used for table of contents
Generally, is it better to be "safe", or should we try to focus on better performance? How much do we care about performance and low-bandwidth with qiskit.org?
Comment on lines
-113
to
+121
| font-weight: bold; | ||
| font-weight: 700; |
There was a problem hiding this comment.
These are synonyms. I made the change to be consistent.
Eric-Arellano
added a commit
to Eric-Arellano/qiskit_sphinx_theme
that referenced
this pull request
Apr 7, 2023
Unless you already had IBM's fonts installed locally, they would not be used. For example, this is how the docs look for me:  After, with this PR:  We can solve this by using Google Fonts and a CSS import. ## Why Google Fonts? We could also try distributing the font directly. I don't have an informed opinion here; ChatGPT suggests benefits of Google Fonts include ease of use & leveraging their CDN. ## Why these font-weights? Font weight gets set by the CSS rule `font-weight:`. So, I searched all font-weights we set. We legitimately use 400, 500, 600, and 700. While our CSS also has 300, that CSS looks dead to me based on grepping `_build/html` in the docs sample build. When we don't include a font-weight, the browser falls back to the nearest weight. So, 300 will fall back to 400. For italics, the browser will try to italicize the font for you if there is no font—but this is actually a bad experience. The downside of including more font variants is that it increases the file size to download our site, which slows down performance, especially with slow Internet. --------- Co-authored-by: Abby Mitchell <23662430+javabster@users.noreply.github.com>
javabster
added a commit
that referenced
this pull request
Apr 7, 2023
Unless you already had IBM's fonts installed locally, they would not be used. For example, this is how the docs look for me:  After, with this PR:  We can solve this by using Google Fonts and a CSS import. ## Why Google Fonts? We could also try distributing the font directly. I don't have an informed opinion here; ChatGPT suggests benefits of Google Fonts include ease of use & leveraging their CDN. ## Why these font-weights? Font weight gets set by the CSS rule `font-weight:`. So, I searched all font-weights we set. We legitimately use 400, 500, 600, and 700. While our CSS also has 300, that CSS looks dead to me based on grepping `_build/html` in the docs sample build. When we don't include a font-weight, the browser falls back to the nearest weight. So, 300 will fall back to 400. For italics, the browser will try to italicize the font for you if there is no font—but this is actually a bad experience. The downside of including more font variants is that it increases the file size to download our site, which slows down performance, especially with slow Internet. --------- Co-authored-by: Abby Mitchell <23662430+javabster@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Unless you already had IBM's fonts installed locally, they would not be used. For example, this is how the docs look for me:
After, with this PR:
We can solve this by using Google Fonts and a CSS import.
Why Google Fonts?
We could also try distributing the font directly. I don't have an informed opinion here; ChatGPT suggests benefits of Google Fonts include ease of use & leveraging their CDN.
Why these font-weights?
Font weight gets set by the CSS rule
font-weight:. So, I searched all font-weights we set. We legitimately use 400, 500, 600, and 700.While our CSS also has 300, that CSS looks dead to me based on grepping
_build/htmlin the docs sample build.When we don't include a font-weight, the browser falls back to the nearest weight. So, 300 will fall back to 400. For italics, the browser will try to italicize the font for you if there is no font—but this is actually a bad experience.
The downside of including more font variants is that it increases the file size to download our site, which slows down performance, especially with slow Internet.