Foundation-emails: @font-face definitions don't get embedded into HTML build

[jsit]

$ foundation new --framework emails

$ npm run build

// src/assets/scss/app.scss

@import 'settings';
@import 'foundation';

@font-face {
  font-family: 'Franklin Gothic';
  src: url("https://example.com/Franklin-Gothic.woff") format("woff");
}

The @font-face definition doesn't get embedded in the HTML build, so an element with font-face:"Franklin Gothic"; won't be rendered in Franklin Gothic.

[jsit]

I've gotten around this by wrapping my @font-face declarations inside @media all {} to force them to be embedded.

[rafibomb]

Ok, that's good to know! Were you running npm start or npm run build? Just making sure the inliner didn't do this.

[jsit]

npm run build. The @font-face definitions get into app.css just fine, but they don't make it into index.html.

[rafibomb]

Hmm I wonder if it's the inliner removing them https://github.com/jonkemp/gulp-inline-css

There should be a wrapper to preserve some styles like media queries. Will have to look into this more. If you find that this was resolved by a newer version of the inliner, we can update it.

[aricallen]

The @media all workaround wasn't working for me so I found another and wanted to share incase anyone else was still having trouble with this. I tweaked the gulpfile to manually grab a file with all the @font-face declarations and toss it in with the inliner.

// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
  var css = fs.readFileSync(css).toString();
  // where `fontsFilePath` is relative path to a file with @font-face declarations
  var fonts = fs.readFileSync(fontsFilePath).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false
    })
    // include both `fonts` and `mqCss` in the style tags
    .pipe($.injectString.replace, '<!-- <style> -->', `<style>${fonts}${mqCss}</style>`)
    .pipe($.htmlmin, {
      collapseWhitespace: true,
      minifyCSS: true
    });

  return pipe();
}

[thomasjrowley]

I have tried this several times, but continue to get the following error:

[14:49:36] 'inline' errored after 544 ms
[14:49:36] TypeError: Cannot read property 'replace' of undefined
at inliner (gulpfile.babel.js:119:11)
at inline (gulpfile.babel.js:87:28)
at bound (domain.js:254:14)
at runBound (domain.js:267:12)
at asyncRunner (/Users/trowley/Desktop/projects/email/campaigns/eye_safety/node_modules/async-done/index.js:36:18)
at process._tickDomainCallback (node.js:381:11)
[14:49:36] 'build' errored after 5.84 s
[14:49:36] 'default' errored after 5.84 s

Perhaps I am placing the .css file with the @font-face declarations in the wrong place.

[aricallen]

I would maybe try console.log'ing the contents returned from the fs.readFileSync(fontsFilePath).toString(); to make sure that the file is being found correctly.

[kartikv11]

@thomasjrowley : it was due to usage of $.injectString.replace instead of $.replace

[rapman]

Hello! May be somebody can help to understand what am i do wrong?

I got the Muller Bold font. Using the squirell servise i made otf files and put them on my server and add @font-face to fonts.scss file.

By using nethod of Thomas Rowley i changed gulpfile.

But in the code, that i got after "npm run buid", - i can't finde any @font-face including.

[jtsurf1]

@jsit - thanks for the tip about wrapping them in the media all declaration, that worked for me...only problem I am facing now is that my font files are local and I am not sure where to put them. When I put them in the src/assets/ directory I am unable to reference them because everything is being served from the dist/ directory. I moved the fonts into dist/assets directory, but everything I run "foundation build" they get removed from that directory. Any tips?

[T04435]

I don't know but I add my fonts as usual in the head as a

    <link href="https://fonts.googleapis.com/css?family=Muli|Titillium+Web" rel="stylesheet">

and after running npm run build it loaded the font.

Thanks, T04435.

[DanielRuf]

Duplicate of https://github.com/zurb/foundation-emails/issues/543

[Sgouws]

An example of what the whole process might look like with @aricallen's example, for those who are struggling.

1. Create a file named 'fonts.scss' in the src/assets/scss directory.
2. Then the config below will pick up that file - config below is in your gulpfile.babel.js file in the root directory of your project.

// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
  var css = fs.readFileSync(css).toString();
  // where `fontsFilePath` is relative path to a file with @font-face declarations
  var fonts = fs.readFileSync("src/assets/scss/fonts.scss").toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false
    })
    // include both `fonts` and `mqCss` in the style tags
    .pipe($.injectString.replace, '<!-- <style> -->', `<style>${fonts}${mqCss}</style>`)
    .pipe($.htmlmin, {
      collapseWhitespace: true,
      minifyCSS: true
    });

  return pipe();
}

1. Stop and restart the npm task.
2. If you get any file/directory not found errors, just check that your fonts.scss location and the reference path in your gulp file.