How to set custom font for foundation button - css

Question

I am trying to set a custom font-family for the button in foundation 6 with no luck I am running foundation 6 with sass and believe they have removed the $button-font-family variable that was in previous versions. What is the best solution to achieve this without the variable?
Ideally I would like to apply a text-transform on the button text as well which is also not a button variable in the _setting.sass foundation file. As you may have gathered I am very new to foundation and sass so any help would be greatly appreciated.

Answer 1

It doesn't look like a font-family is specified in scss/components/_button.scss and that's where button syles are defined. The $body-font-family is set in both scss/settings/_settings.scss as well as scss/_global.scss (if not already defined in _settings.scss). So, verify that you have updated the value of $body-font-family there.
Aside from that, if you are using foundation sass semantically (i.e. mixins), you should be able to use the button mixin like so:
#include button( false, #ebebeb, #a5a5a5, black, solid );
..and then set the font-family property after the mixin like you normally would.
----Update: Based on follow up question/comment----
Here's an example main sass file for one of the foundation sites I'm working on now.
// Author copy of Foundation settings/_settings.scss
#import "settings";
// Author copy of Foundation _globals.scss
#import "global";
// Import from Foundation
#import "path/to/foundation-sites/scss/grid/grid";
#import "path/to/foundation-sites/scss/typography/typography";
#import "path/to/foundation-sites/scss/components/button";
// Include Foundation classes/styles that we want to use
#include foundation-global-styles();
#include foundation-typography();
//
// Author Variables
//
$color-map : ( 'blue': #40578a, 'blue-tint': #7e8ba8, 'blue-shade': #364a75, 'dark': #3d3e41, 'silver': #bdc0c6, 'gold': #ab883c );
$blue : map-get($color-map, 'blue');
$blue-tint : map-get($color-map, 'blue-tint');
$blue-shade: map-get($color-map, 'blue-shade');
$dark : map-get($color-map, 'dark');
$silver : map-get($color-map, 'silver');
$gold : map-get($color-map, 'gold');
//
// Author Components
//
#import "common";
#import "btn";
#import "view";
#import "cover";
#import "header";
#import "hero";
#import "navbar";
#import "main";
#import "page";
#import "intro";
#import "services";
I'll go through this section by section. It's pretty simple and once you have a project set up this way, you'll love it.
// Author copy of Foundation settings/_settings.scss
Here, we are importing a copy of the Foundation _settings.scss file and modifying it for our needs. Don't mess with the original _settings file that ships with Foundation. Doing so will make it more difficult to update the library moving forward.
// Author copy of Foundation _globals.scss
Same concept as the _settings file.
// Import from Foundation
These imports are the only parts of the Foundation framework that I want to use in this case. These component files include the mixins used to generate these components. This allows us to use the mixins semantically in our code.
// Include Foundation classes/styles that we want to use
And this will output the pre-defined classes/styles that we want to use from foundation. Typically, you will at least want to include global and typography styles.
// Author Variables
This is where I put my custom variables (not related to Foundation). You could put this in another partial if you want - just a preference.
// Author components
These are the project's custom components which may or may not utilize Foundation's mixins. The point is, we can if we want to now that we have included the components/mixins we want to use.
So, in your case, you could simply do this:
// Foundation settings
#import "settings";
// Foundation globals
#import "global";
// Import from Foundation
#import "../path/to/foundation-sites/scss/components/button";
//
// Author Variables
//
$special-button-font: Georgia, serif;
.special-button {
#include button(false, #ebebeb, #a5a5a5, black, solid);
font-family: $special-button-font;
&.tiny { font-size: map-get($button-sizes, tiny); }
&.small { font-size: map-get($button-sizes, small); }
&.large { font-size: map-get($button-sizes, large); }
&.expanded { #include button-expand; }
}