-
Notifications
You must be signed in to change notification settings - Fork 612
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
Load other font weights and styles for the body-font #2396
Load other font weights and styles for the body-font #2396
Conversation
Using a font name like `Google_Karla_400` for `body-font`, it would only load the 400 font weight. When using `Google_Karla_700` for another property, it would then load both the 400 and 700 fon weights. But since in CSS you could make something bold or italic, the font weight and/or style for this text might be missing, as it was not loaded automatically by using it in another property. This PR will make sure that the most common font weights and font styles will be loaded for the body font.
I wasn't able to (easily) find out, if the Montserrat font was also used in
|
hi @2ndkauboy , looks reasonable. can you please update CHANGELOG file also? thanks |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CHANGELOG should be updated in this PR
This is not a valid value (since it's not an option in the schema) and this will slow down the PageSpeed, potentially for no reason. I would recommend reconsidering this change. |
Hi @mattcoy-arcticleaf. Thank you for bringing that up. Obviously, you're right! What do you think if we can follow up the original contributor and extend |
What?
Using a font name like
Google_Karla_400
forbody-font
, it would only load the 400 font weight. When usingGoogle_Karla_700
for another property, it would then load both the 400 and 700 fon weights. But since in CSS you could make something bold or italic, the font weight and/or style for this text might be missing, as it was not loaded automatically by using it in another property.This PR will make sure that the most common font weights and font styles will be loaded for the body font.
Screenshots
The Karla font with
![Karla-Font](https://private-user-images.githubusercontent.com/1793177/274227261-bb8c76ab-4e48-4e3e-9d9e-0e10e552390c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0MjE4OTksIm5iZiI6MTczOTQyMTU5OSwicGF0aCI6Ii8xNzkzMTc3LzI3NDIyNzI2MS1iYjhjNzZhYi00ZTQ4LTRlM2UtOWQ5ZS0wZTEwZTU1MjM5MGMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTNUMDQzOTU5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTIyN2QzZTk1NWJhMWVjMTk4MmM4ZTQ4MmM0NDYwMGMyNmQ1YjdmMGEwMTliNTUwMjNiNzdiMjBiM2YwMGQ0NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.irEfyByBd0TIQ4UdhyGW4AXQ4-tbdRn4eYbpm7LBqq4)
font-weight: 400
rendered in bold - looks squashed:The Karla font with
![Karla-Font-700](https://private-user-images.githubusercontent.com/1793177/274227254-cd48b330-2b5b-47d0-8b04-856a451f2919.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0MjE4OTksIm5iZiI6MTczOTQyMTU5OSwicGF0aCI6Ii8xNzkzMTc3LzI3NDIyNzI1NC1jZDQ4YjMzMC0yYjViLTQ3ZDAtOGIwNC04NTZhNDUxZjI5MTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTNUMDQzOTU5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTAxNzkwMTNiZjY4MTAzMDBkYzA3ZDYwZTI3YmZiMDZjZWQ2YzBhOWUxMTI5MTk4Y2U5ODMxMjczMGEyNDc0MSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.0YJxnUBbm7-e6OKv5OVY0fZSG13jccSwHHSxw3YC99w)
font-weight: 700
rendered in bold - looks perfect: