Font url is not relative to css location. about gulp-google-webfonts HOT 5 CLOSED

How would this be a breaking change? The way the CSS files are generated in relation to where the font files are located is incorrect and broken. CSS url paths are relative to the location of the CSS file.

from gulp-google-webfonts.

No, this would be a breaking change. Feel free to send a PR, including an extra boolean parameter to enable such behaviour.

from gulp-google-webfonts.

Current users expect the current behaviour. Hence changing it would be a breaking change.

from gulp-google-webfonts.

Hi there 👋,

First of all thank you for your time and effort that goes into this package.

Any news on this request? If someone were to point me in the right direction I'd love to create a PR and add this, if I am capable of doing so.

My Gulp task:

gulp.task('google', function () {
    return gulp.src('./fonts.list')
    .pipe(plugins.googleWebfonts({
        fontsDir: 'fonts',
        cssDir: 'scss/fonts',
        cssFilename: '_google.scss'
    }))
    .pipe(gulp.dest('./assets'));
});

Directory structure

- assets
-- dist
-- fonts
-- img
-- js
-- scss

As you can see, I'm storing the downloaded fonts in assets/fonts, the CSS (which I rename to use SCSS) in assets/scss/fonts and rename the file _google.scss. After all is said and done, my dist folder looks like:

- dist
-- css
-- fonts
-- img
-- js

This is the reason I need to make the following change(s):

Before changes

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/Roboto-normal-500.woff) format('woff');
    unicode-range: U+0-10FFFF;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url(fonts/Roboto-italic-500.woff) format('woff');
    unicode-range: U+0-10FFFF;
}

After changes

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/Roboto-normal-500.woff) format('woff');
    unicode-range: U+0-10FFFF;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url(../fonts/Roboto-italic-500.woff) format('woff');
    unicode-range: U+0-10FFFF;
}

Note the ../ in the src.

from gulp-google-webfonts.

Either a boolean parameter could be added, indicating (when set) that the font paths should be relative to CSS paths, or an optional string parameter could be added, containing a prefix to be prepended to font paths.

The code isn't commented particularly well. but it's quite short so you may be able to add this without much effort after giving the code a quick read.

from gulp-google-webfonts.