Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

inliner seems to remove font @import #38

Open
rtowings opened this issue Sep 8, 2016 · 6 comments
Open

inliner seems to remove font @import #38

rtowings opened this issue Sep 8, 2016 · 6 comments
Labels
feature request help wanted

Comments

@rtowings
Copy link

rtowings commented Sep 8, 2016

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?
@jonkemp
Copy link
Owner

jonkemp commented Sep 12, 2016

Possibly. I would suggest providing a reduced test case with gulp.

https://css-tricks.com/reduced-test-cases/

@rtowings
Copy link
Author

rtowings commented Sep 14, 2016 •
edited

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.

@victorlap
Copy link

I am facing the same problem. Very frustrating.

@HagarFbx
Copy link

I'm having the same problem

@wokalek-work
Copy link

Yes.

@NickVanHolsbeeck
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@jonkemp @victorlap @NickVanHolsbeeck @rtowings @wokalek-work @HagarFbx