How can the font-family be modified?

[ppazos]

It seems there is a default font family but the documentation of the Typography doesn't mention the font family or how can it be modified.

[stuyam]

Great question, this is a project Im working on currently.

[bracketsberlin]

@ppazos I know my answer comes a bit late to the party but maybe it's helpful to someone else in the future.

Out of the box, the following font families are set as a default:
$font-family-base: Helvetica, Arial, sans-serif !default;

To customize it, I am using a custom styles.scss in which I'm overriding the SCSS variables and then import the bootstrap-email-styles.

Minimal example of my styles.scss

/* Override Typography Variables */
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$headings-font-family: $font-family-base;

body, table, td {
  font-family: $font-family-base !important;
}

/* Import bootstrap-email styles */
//= @import bootstrap-email;

Configure styles.scss like so:

Docs