Open jsit opened 8 years ago
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.
src/assets/scss
directory.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();
}
$ foundation new --framework emails
$ npm run build
The
@font-face
definition doesn't get embedded in the HTML build, so an element withfont-face:"Franklin Gothic";
won't be rendered in Franklin Gothic.