Menu icon Foundation
Foundation for Emails remove font @import

Hey guys,

 

I'm having a hard time with Foundation for emails: I can't make my google fonts work. Everytime I run foundation build it removes the font import... 

I tried to import and link the font... Also, I tried to import it inside a media query. No success so far.

 

Does anyone know a way to make it work? It sucks to build the files and then replace the @import everytime...

emailsGoogle Fontsfonts

Hey guys,

 

I'm having a hard time with Foundation for emails: I can't make my google fonts work. Everytime I run foundation build it removes the font import... 

I tried to import and link the font... Also, I tried to import it inside a media query. No success so far.

 

Does anyone know a way to make it work? It sucks to build the files and then replace the @import everytime...

Corey Schaaf over 3 years ago

Could you add your font import to the _app.scss? I'm assuming it won't get removed there. 

Just create a separate partial or include with a _custom.scss partial and import that partial into the _app.scss. Just make sure you set a fallback as not all email clients are compatible with Font Import or @font-face. 

Method 1:

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
 

@font-face includes more-familiar CSS properties, and is exactly what you if you visit the URL in the example above:

Method 2

    @font-face{
        font-family:'Open Sans';
        font-style:normal;
        font-weight:400;
        src:local('Open Sans'),
            local('OpenSans'),
            url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
    }

 

After the import is complete, regardless of the method you choose, you can set the font family value as you normally would:

    .emailContent{
        font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    }

 

Henrique Zambonin over 3 years ago

H Corey,

Thanks for your reply.

I've tried something similar to your solution, but no luck. The inliner still removes every font-face, @import, link and so on.

What I found was this: https://github.com/zurb/foundation-emails/issues/284

So, I edited my gulpfile and it finally worked. :)

Corey Schaaf over 3 years ago

Are you adding the import statement to the _scss partial? And then it gets removed during inlining? 

Thomas Rowley over 3 years ago

I am having a similar issue to this. I have tried both methods, and during the inline process it removes it. I manually added it to the inline version and it worked. Was there ever a solution found for this?

Corey Schaaf over 3 years ago

 There's a workaround outlined on github here. 

https://github.com/zurb/foundation-emails/issues/284

 

Thomas Rowley over 3 years ago

 Thank you @Corey, I didn't see that in the original thread. Much appreciated!

Corey Schaaf over 3 years ago

No worries mate! I sometimes miss them to. 

Thomas Rowley over 3 years ago

I tried the fix several times and continue to get an error when I am attempting to launch npm run build. Is there anyone would could post their gulp file code here to ensure that I am not having an issue. I continue to get an error on the replace function. 

Henrique Zambonin over 3 years ago

Hey Thomas,

Here is my gulpfile:

import gulp     from 'gulp';
import plugins  from 'gulp-load-plugins';
import browser  from 'browser-sync';
import rimraf   from 'rimraf';
import panini   from 'panini';
import yargs    from 'yargs';
import lazypipe from 'lazypipe';
import inky     from 'inky';
import fs       from 'fs';
import siphon   from 'siphon-media-query';

const $ = plugins();

// Look for the --production flag
const PRODUCTION = !!(yargs.argv.production);

// Build the "dist" folder by running all of the above tasks
gulp.task('build',
  gulp.series(clean, pages, sass, images, inline));

// Build emails, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf('dist', done);
}

// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials'
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}

// Reset Panini's cache of layouts and partials
function resetPages(done) {
  panini.refresh();
  done();
}

// Compile Sass into CSS
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
    .pipe($.sass({
      includePaths: ['node_modules/foundation-emails/scss']
    }).on('error', $.sass.logError))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/css'));
}

// Copy and compress images
function images() {
  return gulp.src('src/assets/img/*')
    .pipe($.imagemin())
    .pipe(gulp.dest('./dist/assets/img'));
}

// Inline CSS and minify HTML
function inline() {
  return gulp.src('dist/**/*.html')
    .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
    .pipe(gulp.dest('dist'));
}

// Start a server with LiveReload to preview the site in
function server(done) {
  browser.init({
    server: 'dist'
  });
  done();
}

// Watch for file changes
function watch() {
  gulp.watch('src/pages/**/*.html', gulp.series(pages, inline, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, pages, inline, browser.reload));
  gulp.watch('src/img/**/*', gulp.series(images, browser.reload));
}

// 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/fonts/fonts.css').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();
}

And here's my fonts.scss. Notice that I didn't @import them, but pasted the code from google directly into the file:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url("https://fonts.gstatic.com/s/ubuntu/v9/ODszJI8YqNw8V2xPulzjO_esZW2xOQ-xsNqO47m55DA.woff2") format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url("https://fonts.gstatic.com/s/ubuntu/v9/iQ9VJx1UMASKNiGywyyCXvesZW2xOQ-xsNqO47m55DA.woff2") format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url("https://fonts.gstatic.com/s/ubuntu/v9/WkvQmvwsfw_KKeau9SlQ2_esZW2xOQ-xsNqO47m55DA.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url("https://fonts.gstatic.com/s/ubuntu/v9/gYAtqXUikkQjyJA1SnpDLvesZW2xOQ-xsNqO47m55DA.woff2") format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url("https://fonts.gstatic.com/s/ubuntu/v9/Wu5Iuha-XnKDBvqRwQzAG_esZW2xOQ-xsNqO47m55DA.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url("https://fonts.gstatic.com/s/ubuntu/v9/sDGTilo5QRsfWu6Yc11AXg.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url("https://fonts.gstatic.com/s/ubuntu/v9/MLKvhAbswThSVACnSTWCpxJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url("https://fonts.gstatic.com/s/ubuntu/v9/IiMFELcoPB-OzGzq14k4ehJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url("https://fonts.gstatic.com/s/ubuntu/v9/H2j4_4xA-HIuoc_A3BIwVBJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url("https://fonts.gstatic.com/s/ubuntu/v9/EtSRPnpS3nIR-zKYiR-sDBJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url("https://fonts.gstatic.com/s/ubuntu/v9/gMhvhm-nVj1086DvGgmzBxJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url("https://fonts.gstatic.com/s/ubuntu/v9/OsJ2DjdpjqFRVUSto6IffFtXRa8TVwTICgirnJhmVJw.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url("https://fonts.gstatic.com/s/ubuntu/v9/oxrPYIm05JrY_0rFIEQ_oRJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url("https://fonts.gstatic.com/s/ubuntu/v9/4z2U46_RRLOfkoHsWJG3vxJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url("https://fonts.gstatic.com/s/ubuntu/v9/2vaWVxeAxHVkFcnCBCQCyRJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url("https://fonts.gstatic.com/s/ubuntu/v9/M-Ii49WH_TYYnOjQyLgTMBJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url("https://fonts.gstatic.com/s/ubuntu/v9/nsLtvfQoT-rVwGTHHnkeJhJtnKITppOI_IvcXXDNrsc.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url("https://fonts.gstatic.com/s/ubuntu/v9/0ihfXUL2emPh0ROJezvraFtXRa8TVwTICgirnJhmVJw.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

 

I hope this helps.

Thomas Rowley over 3 years ago

It still doesn't seem to work for me. I must be doing something wrong. When I run the npm build, I get the error in terminal:

[09:52:47] 'inline' errored after 545 ms

[09:52:47] 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)

[09:52:47] 'build' errored after 5.89 s

[09:52:47] 'default' errored after 5.89 s

 

npm ERR! Darwin 14.5.0

npm ERR! argv "node" "/usr/local/bin/npm" "run" "build"

npm ERR! node v0.12.7

npm ERR! npm  v3.5.2

npm ERR! code ELIFECYCLE

npm ERR! [email protected] build: `gulp --production`

npm ERR! Exit status 1

npm ERR! 

npm ERR! Failed at the [email protected] build script 'gulp --production'.

npm ERR! Make sure you have the latest version of node.js and npm installed.

npm ERR! If you do, this is most likely a problem with the foundation-emails-template package,

npm ERR! not with npm itself.

npm ERR! Tell the author that this fails on your system:

npm ERR!     gulp --production

npm ERR! You can get information on how to open an issue for this project with:

npm ERR!     npm bugs foundation-emails-template

npm ERR! Or if that isn't available, you can get their info via:

npm ERR!     npm owner ls foundation-emails-template

npm ERR! There is likely additional logging output above.

 

npm ERR! Please include the following file with any support request:

 

npm ERR!     /Users/trowley/Desktop/projects/email/campaigns/eye_safety/npm-debug.log

Thomas Rowley over 3 years ago

Here is my complete gulpfile.babel.js file. Is this correct file to be modifying?

import gulp     from 'gulp';
import plugins  from 'gulp-load-plugins';
import browser  from 'browser-sync';
import rimraf   from 'rimraf';
import panini   from 'panini';
import yargs    from 'yargs';
import lazypipe from 'lazypipe';
import inky     from 'inky';
import fs       from 'fs';
import siphon   from 'siphon-media-query';
import path     from 'path';
import merge    from 'merge-stream';
import beep     from 'beepbeep';
import colors   from 'colors';

const $ = plugins();

// Look for the --production flag
const PRODUCTION = !!(yargs.argv.production);

// Declar var so that both AWS and Litmus task can use it.
var CONFIG;

// Build the "dist" folder by running all of the above tasks
gulp.task('build',
  gulp.series(clean, pages, sass, images, inline));

// Build emails, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, watch));

// Build emails, then send to litmus
gulp.task('litmus',
  gulp.series('build', creds, aws, litmus));

// Build emails, then zip
gulp.task('zip',
  gulp.series('build', zip));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf('dist', done);
}

// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers'
    }))
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}

// Reset Panini's cache of layouts and partials
function resetPages(done) {
  panini.refresh();
  done();
}

// Compile Sass into CSS
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
    .pipe($.sass({
      includePaths: ['node_modules/foundation-emails/scss']
    }).on('error', $.sass.logError))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/css'));
}

// Copy and compress images
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.imagemin())
    .pipe(gulp.dest('./dist/assets/img'));
}

// Inline CSS and minify HTML
function inline() {
  return gulp.src('dist/**/*.html')
    .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
    .pipe(gulp.dest('dist'));
}

// Start a server with LiveReload to preview the site in
function server(done) {
  browser.init({
    server: 'dist'
  });
  done();
}

// Watch for file changes
function watch() {
  gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, inline, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('change', gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('change', gulp.series(resetPages, sass, pages, inline, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
}

// 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/css/fonts.css').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();
}

// Ensure creds for Litmus are at least there.
function creds(done) {
  var configPath = './config.json';
  try { CONFIG = JSON.parse(fs.readFileSync(configPath)); }
  catch(e) {
    beep();
    console.log('[AWS]'.bold.red + ' Sorry, there was an issue locating your config.json. Please see README.md');
    process.exit();
  }
  done();
}

// Post images to AWS S3 so they are accessible to Litmus test
function aws() {
  var publisher = !!CONFIG.aws ? $.awspublish.create(CONFIG.aws) : $.awspublish.create();
  var headers = {
    'Cache-Control': 'max-age=315360000, no-transform, public'
  };

  return gulp.src('./dist/assets/img/*')
    // publisher will add Content-Length, Content-Type and headers specified above
    // If not specified it will set x-amz-acl to public-read by default
    .pipe(publisher.publish(headers))

    // create a cache file to speed up consecutive uploads
    //.pipe(publisher.cache())

    // print upload updates to console
    .pipe($.awspublish.reporter());
}

// Send email to Litmus for testing. If no AWS creds then do not replace img urls.
function litmus() {
  var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;

  return gulp.src('dist/**/*.html')
    .pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
    .pipe($.litmus(CONFIG.litmus))
    .pipe(gulp.dest('dist'));
}

// Copy and compress into Zip
function zip() {
  var dist = 'dist';
  var ext = '.html';

  function getHtmlFiles(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        var fileExt = path.join(dir, file);
        var isHtml = path.extname(fileExt) == ext;
        return fs.statSync(fileExt).isFile() && isHtml;
      });
  }

  var htmlFiles = getHtmlFiles(dist);

  var moveTasks = htmlFiles.map(function(file){
    var sourcePath = path.join(dist, file);
    var fileName = path.basename(sourcePath, ext);

    var moveHTML = gulp.src(sourcePath)
      .pipe($.rename(function (path) {
        path.dirname = fileName;
        return path;
      }));

    var moveImages = gulp.src(sourcePath)
      .pipe($.htmlSrc({ selector: 'img'}))
      .pipe($.rename(function (path) {
        path.dirname = fileName + '/assets/img';
        return path;
      }));

    return merge(moveHTML, moveImages)
      .pipe($.zip(fileName+ '.zip'))
      .pipe(gulp.dest('dist'));
  });

  return merge(moveTasks);
}


Corey Schaaf over 3 years ago

@Thomas @Henry I searched through open issues / closed issue on Github and came across this. Might be just what you're looking for. 

https://github.com/zurb/foundation-emails/issues/284

Corey Schaaf over 3 years ago

 @Thomas - Sorry - I just noticed it was you who made the last post on that github link.  My apologies for getting your hopes up! 

Rafi Benkual over 3 years ago

The inliner is removing it - i didn't see an open issue there so that may be the first step: https://github.com/jonkemp/gulp-inline-css/issues

Rafi Benkual over 3 years ago

Another option is to find a way to use the existing 

<raw></raw>

tag to hide it from the inliner task.

This would take reworking Inky so that it can run the inliner in the same time as the Inky is running.

In other words

  1. Inky raw out (removes contents from page)
  2. Inky parse runs
  3. Inliner runs
  4. Inky raw in

There is a branch for this we're making some progress on.

Thomas Rowley over 3 years ago

Great idea Rafi, I think that this would be a fantastic addition. Thank you for the update.

Yuriy Shustov over 2 years ago

Anybody, solve that problem? I got same error, that Thomas...

Trying to connect font from my server.

Yuriy Shustov over 2 years ago

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.

That am I do wrong?

 

gulpfile and font.scss

 

 

Brad Shomer about 2 years ago

We tried pretty much everything that's been suggested here, but eventually found a fairly low-tech workaround. I know the font instructions are normally placed in the <style> tag in the header. We found that the fonts work if you place a <style> tag in the body of your email just below the front matter. Then inline the font on the tags you want them applied to. Here is what it looks like in our source file. Note that you need the "!important" tag 

---
layout: editorial-workspan-weekly

---
<style>
@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Fira+Sans|Signika');
  .workspan-headline {font-family: 'Fira Sans', Helvetica !important}
  .workspan-tagline {font-family: 'Fira Sans', Verdana !important}
  .category-head {font-family: 'Signika', Verdana, sans-serif !important}
  .workspan-body {font-family: 'Bree Serif', Helvetica !important}		
</style>

<container>
  <row>
    <columns small="12" large="12">

      <p style="font-family: 'Fira Sans', Helvetica !important">No meis velit integre has. Veniam dicunt invidunt eam ad, vel utinam malorum qualisque et. Convenire partiendo scriptorem vix ut. Discere prodesset eam id, vix at vide choro delectus. Mel eu partiendo gubergren splendide, reque verterem ei vim.</p>		

    </columns>
  </row>
</container>

 

 

This seems to work for the email clients you would expect. It definitely has some drawbacks though. The fact that the styles need to be inlined defeats the purpose of Foundation for Email. I hope Zurb finds a way to make this easier.

 

 

 

 

 

Zsolt van den Mar almost 2 years ago

This is how I was able to solve this issue (once and for all?):

1. I uploaded a CSS file with the @font declarations to my server

2. In my `_settings.scss` file I set `$body-font-family: MyCustomFont, Helvetica, sans-serif;`

3. In my template file I added `<!-- <font> -->` line under `<!-- <style> -->` (which BTW is super important to be there - it's the anchor for the media queries after inlining!). It's line 12 or so after the title.

4. In my `gulpfile.babel.js` file I added this line in the `inliner` function after line 132 (`.pipe($.replace, '<!-- <style> -->',...`)

.pipe($.replace, '<!-- <font> -->', `<style>@import url('https://link-to-your.css');</style>`)

This essentially includes the font import after the file has been inlined when running `npm run build`.

For regular editing just add the font import style in your template - this will get stripped for production anyways.

Good luck!