How do I change the font?

[mohsin651]

How can I globally change the font on a website, including the footer, navbar, and sidebar?

[rjzupkoii]

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.

[mohsin651]

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?

[rjzupkoii]

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.