foundation-emails

foundation-emails copied to clipboard

$ 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.

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

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

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

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.

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();
}

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.

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.

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

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.

@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?

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.

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

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();
}

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