Menu icon Foundation
Best way to set global font for site?

I placed the following code in a CSS file referenced after "foundation.css" on my pages.

        
*{
font-family: 'myfont'; 
   
}

         

This works for some things but I found that the top bar items & headlines hadn't changed so I added the following to my SASS file as these are the only font-face variables I could find listed in the Foundation documentation.

$header-font-family:, $paragraph-font-family:, $topbar-link-font-family: 'myfont';

This combined with the global * selector seems to have taken care of it but I was just wondering if there was a proper or more elegant way to do this? Thanks!

Fontglobal fontfont-familycustom font

I placed the following code in a CSS file referenced after "foundation.css" on my pages.

        
*{
font-family: 'myfont'; 
   
}

         

This works for some things but I found that the top bar items & headlines hadn't changed so I added the following to my SASS file as these are the only font-face variables I could find listed in the Foundation documentation.

$header-font-family:, $paragraph-font-family:, $topbar-link-font-family: 'myfont';

This combined with the global * selector seems to have taken care of it but I was just wondering if there was a proper or more elegant way to do this? Thanks!

Wellington Cordeiro over 5 years ago

I would override the variables in _settings.scss. Namely this one.

$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

To something like

$header-font-family: "myfont"

The paragraph font inherits from the $header-font-family, there's more info here.
http://foundation.zurb.com/docs/components/typography.html

Jon Friedrich over 5 years ago

Thanks! I'm new to Foundation and didn't realize there was a _settings.scss file with all the variables already input! In order to make a change do I just remove the comment & add my custom styles?

I realized _settings.scss wasn't referenced in the mass import list within foundation.scss. Does that matter? Is it referenced elsewhere or do I need to import _settings.scss in that list?