inliner seems to remove font @import
rtowings opened this issue · 6 comments
I'm new at this, so I apologize in advance for my ignorance.
I'm attempting to import a google font by including the following in my app.scss:
@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600);
@import 'settings';
@import 'foundation-emails';
@import 'local'
I'm using foundation emails 2.2.1 with the following dependencies:
"babel-core": "^6.3.26",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.7.2",
"beepbeep": "^1.2.0",
"browser-sync": "^2.11.0",
"colors": "^1.1.2",
"gulp": "git+https://github.com/gulpjs/gulp.git#4.0",
"gulp-awspublish": "^3.0.1",
"gulp-cli": "^1.1.0",
"gulp-html-src": "^1.0.0",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.4.0",
"gulp-inline-css": "^3.0.0",
"gulp-litmus": "0.0.7",
"gulp-load-plugins": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-zip": "^3.2.0",
"inky": "^1.3.6",
"lazypipe": "^1.0.1",
"merge-stream": "^1.0.0",
"panini": "^1.3.0",
"rimraf": "^2.3.3",
"siphon-media-query": "^1.0.0",
"yargs": "^4.1.0"
I can see the import in the app.css:
@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600);
But when the final index.html is created, the font import is missing.
Is it being removed by the inliner?
Possibly. I would suggest providing a reduced test case with gulp.
So I simplified my test to the following:
app.css:
@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600);
body { color: #427c99; font-family: Raleway, Arial, Helvetica, sans-serif; font-weight: normal; text-align: left; line-height: 1.3; }
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>My Test</title>
</head>
<body>
<!-- <style> -->
<div class="body">
WWWLorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.
</div>
</body>
</html>
Output from inliner:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><title>My Test</title></head><body style="color:#427c99;font-family:Raleway,Arial,Helvetica,sans-serif;font-weight:400;line-height:1.3;text-align:left"><style></style><div class="body">WWWLorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</div></body></html>
The css is inlined, as expected, but the reference to the font location has disappeared.
I am facing the same problem. Very frustrating.
I'm having the same problem
Yes.
Its something I have also faced (also with Foundation).
'Solution' I used was making use of a <link rel="stylesheet" href="..."> (Google Fonts) in one my template-layout-files instead of using @import in my app.scss, as your 'builded' code is inserted into these tempate-layout-files.