-
Notifications
You must be signed in to change notification settings - Fork 3.2k
-
How can I globally change the font on a website, including the footer, navbar, and sidebar?
Beta Was this translation helpful? Give feedback.
All reactions
The master location for fonts is in _sass/_variables and the lines that govern the fonts look like this:
$global-font-family : $sans-serif; $header-font-family : $sans-serif; $caption-font-family : $serif;
By default the $sans-serif variable is used which uses the following default and fail overs:
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
If you are going to change the template font is recommended that you define a new font variable that includes fail overs like the $sans-serif variable and then assign that variable to the primary variables listed above.
Replies: 2 comments 3 replies
-
The master location for fonts is in _sass/_variables and the lines that govern the fonts look like this:
$global-font-family : $sans-serif; $header-font-family : $sans-serif; $caption-font-family : $serif;
By default the $sans-serif variable is used which uses the following default and fail overs:
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
If you are going to change the template font is recommended that you define a new font variable that includes fail overs like the $sans-serif variable and then assign that variable to the primary variables listed above.
Beta Was this translation helpful? Give feedback.
All reactions
-
How to use external font, I installed "Lucida Sans" on my system, and replace in the place of "-apple-system", it worked locally, but not on deployment, why so?
Beta Was this translation helpful? Give feedback.
All reactions
-
How your web browser goes about resolving fonts can be a bit tricky, but the short answer is that unless you serve a font as part of website (which has technical as well as licensing issues) there's no real guarantee that users will be able to see the font. Hence why there is a failover string on the template - to give the web browser more options to gracefully resolve the font.
Beta Was this translation helpful? Give feedback.
All reactions
-
@rjzupkoii Any pointers on how to use a font like that? For example, if I add the font to my repository (which I have), how can I get it to work?
Beta Was this translation helpful? Give feedback.
All reactions
-
Okay, I think I've figured out how to do it. Not sure if it's the appropriate way to go about doing this. What I did was:
- I uploaded the desired font family somewhere in the repository (I went for
assets/fonts). - I added a .css file for the font family at
assets/cssand modified its src tags (?) to point to the right location for the fonts. - I edited
custom.htmlunder_includes/headto include the new .css file for the desired font (just by copying the line for theacademiconsfont and modifying the new line). - I edited
themes.scssand added the right font names to the$serif,$sans-serifand other required variables.
After all of this was done and the changes were pushed, it started to work.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2