Grunt Build Incorrectly Optimizing CSS Url - css

I'm using Backbone Boilerplate and I've added the bower Ratchet 2.* dependency, then I'm importing it in my styles/index.css file from it's bower origin folder:
#import "../../vendor/bower/ratchet/dist/css/ratchet.css";
This grabs the file correctly, but for some reason when compressing it's changing the url in my #font-face selector.
The original selector looks like this:
#font-face {
font-family: Ratchicons;
font-style: normal;
font-weight: normal;
src: url("app/fonts/ratchicons.eot");
src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
url("app/fonts/ratchicons.woff") format("woff"),
url("app/fonts/ratchicons.ttf") format("truetype"),
url("app/fonts/ratchicons.svg#svgFontName") format("svg");
After running the grunt task my new optimized style.css for this selector looks like this:
#font-face {
font-family: Ratchicons; font-style: normal; font-weight: normal;
src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
url("app/fonts/ratchicons.woff") format("woff"),
url("app/fonts/ratchicons.ttf") format("truetype"),
url("app/fonts/ratchicons.svg#svgFontName") format("svg");
}
(line breaks were added for display here)
You'll notice that the entire first line:
src: url("app/fonts/ratchicons.eot");
has been completely stripped out, and the next line should be:
src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
but has become:
src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
I can't understand or explain why this is happening, but I need it resolved.
I checked the styles section of my gruntfile and it looks like so:
styles: {
// Out the concatenated contents of the following styles into the below
// development file path.
"dist/styles.css": {
// Point this to where your `index.css` file is location.
src: "app/styles/index.css",
// The relative path to use for the #imports.
paths: ["app/styles"],
// Rewrite image paths during release to be relative to the `img`
// directory.
forceRelative: "/app/img/"
}
},
I'm assuming that for some reason the style optimizer is adding the forceRelative url to an original url of ../fonts/fontfile but I can't explain why or what to do.
Help appreciated.

Related

How to include font into css file

I have a css file which I included into Angular project this way:
{
"styles" : [
"src/assets/css/style.css"
],
}
Into angular.json I added:
"assets": [
"src/favicon.ico",
"src/assets"
],
But into the css file font files are loaded like:
src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57");
src: url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"), url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2"),
I get error:
Can't resolve 'assets/fonts/glyphicons-halflings-regular.ttf'
And many more other like this.
What is the proper way to solve this problem?
You can add your font as follows:
#font-face {
font-family:"Your font";
src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57"),
url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"),
url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2");
}
Hope it help you.
I usually include my fonts like this :
#font-face { font-family: "Nunito Light"; font-display: swap; src: url('../font/Nunito/Nunito-Light.ttf'); }
You should just include .ttf file of your fonts instead of including .eot, .woff2
here : Everythings fonts
you can change .woff2 font to .ttf font

Ionic2 $font-family-base not working

The variable $font-family-base in Ionic2 is not working.
In the app.variable.scss file I added a new value to it, but the old value remains.
Other variables like $font-size-base is working fine
Those are my gulp tasks for building www:
gulp.task("fonts", function () {
return copyFonts({
src: [
"app/fonts/**/*.+(eot|ttf|woff|woff2|svg)"
]
});
});
gulp.task("sass", function () {
return buildSass({
sassOptions: {
includePaths: [
"node_modules/ionic-angular",
"node_modules/ionicons/dist/scss"
]
}
});
});
What am I missing?
That is my font-faces
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 400;
src: local("Maven Pro"), local("Maven-Pro-Regular"), url("#{$font-path}/MavenPro-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 500;
src: local("Maven Pro Medium"), local("Maven-Pro-Medium"), url("#{$font-path}/MavenPro-Medium.ttf") format("truetype");
}
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 700;
src: local("Maven Pro Bold"), local("Maven-Pro-Bold"), url("#{$font-path}/MavenPro-Bold.ttf") format("truetype");
}
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 900;
src: local("Maven Pro Ultra Bold"), local("Maven-Pro-Regular-Ultra-Bold"), url("#{$font-path}/MavenPro-Black.ttf") format("truetype");
}
This font-faces are in my app.scss file which is referenced in my app.core.scss
app.core.scss:
// http://ionicframework.com/docs/v2/theming/
// App Shared Imports
// --------------------------------------------------
// These are the imports which make up the design of this app.
// By default each design mode includes these shared imports.
// App Shared Sass variables belong in app.variables.scss.
#import "../app";
#import "../users/sus/sus";
#import "../users/sus/home/home";
#import "../users/sus/subjects/german/german";
#import "../users/sus/subjects/math/math";
UPDATE:
If I do it using specific device sass variable i.e:
$font-family-md-base
$font-family-ios-base
$font-family-wp-base
Tha is a wird behavior, but I guess the $font-family-base has to be set in a specific order or file, what I still didn't figure out.
I've just asked Mike (from Ionic Team) and he told me:
$font-family-ios-base is for when it is on an ios device
And the same applies for
$font-family-md-base
and
$font-family-wp-base
But I think the key is that:
$font-family-base is when it's neither ios or md
I think this explains the behaviour you were talking about. So in your case you would need to change the value of that font in
$font-family-md-base
$font-family-ios-base
$font-family-wp-base
or any of them to make it work.

"__MSG_##extension_id__" doesn't work and webfonts don't load

I'm developing a Google Chrome Extension which is injecting a stylesheet into a specific website I defined in manifest.json.
In the stylesheet are webfonts included with #font-face and src: url("chrome-extension://__MSG_##extension_id__/assets/fonts/[...], but __MSG_##extension_id__ doesn't seem to work and webfonts like Font Awesome just end up still showing squares.
manifest.json
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"http://[url].com/*"
],
"css": ["assets/css/main.css"]
}
],
"web_accessible_resources": ["assets/fonts/*", "assets/img/*"]
main.css
#font-face {
font-family: 'FontAwesome';
src: url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?v=4.3.0");
src: url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal; }
I've already tried hardcoding my Extension ID in the url and it worked on my iMac and displayed Font Awesome correctly, but when I switched to my Macbook and hardcoded the new Extension ID in, it doesn't work anymore, but I'm sure I've did nothing wrong, since I just needed to change the ID. Now I wanted to try __MSG_##extension_id__ but it also doesn't work. Another try to embed the fonts with Base64 also failed. My other webfonts are Roboto and Open Sans included the same way.
It's like the Chrome Extension can't access to the fonts.
I saw the last comment on the question, Same problem 4 years later :D.
I am sure almost everyone already finds out the solution or they have got the things done in their way. But I think this will help others as the same question is being asked again and again.
Answer
const urlFontAwesomeWebFontEot = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.eot')
const urlFontAwesomeWebFontSvg = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.svg')
#font-face {
font-family: 'FontAwesome';
src: url(${urlFontAwesomeWebFontEot});
src: url(${urlFontAwesomeWebFontSvg}) format("svg");
font-weight: normal;
font-style: normal; }
I just created variables for two URLs but you can create as per your requirements.
chrome.runtime.getURL API help to get resource's absolute URL pointing extension
References
Google Chrome extension relative path
https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL
I extend Dinesh's answer - there is the code that is ready to be pasted into js file:
const urlFontAwesomeWebFontEot = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.eot')
const urlFontAwesomeWebFontSvg = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.svg')
const newFontStyleSheet = document.createElement("style");
newFontStyleSheet.textContent = `
#font-face {
font-family: 'FontAwesome';
src: url(${urlFontAwesomeWebFontEot});
src: url(${urlFontAwesomeWebFontSvg}) format("svg");
font-weight: normal;
font-style: normal; }
`;
document.head.appendChild(newFontStyleSheet);
Just follow below steps:
Lets assume we have a font in fonts folder:
\fonts
font.woff
manifest.json
update your manifest.json with
...
"web_accessible_resources": [
"fonts/*"
],
...
in CSS file provide url chrome-extension://__MSG_##extension_id__/fonts/font.woff
If you don't provide web_accessible_resources permissions, request for font will be blocked (since manifest version 2 including ver 2).
References:
https://developer.chrome.com/docs/extensions/mv2/manifest/web_accessible_resources/
https://developer.chrome.com/docs/extensions/reference/i18n/

How to change the path when compile the bootstrap compass file

I've added bootstrap-sass into my project and import it to my application.scss file like this
#
import "../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap-compass";
.bootstrap{
#import "../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap";
}
In the bootstrap compass file, there are functions
#function twbs-font-path($path) {
#return font-url($path, true);
}
#function twbs-image-path($path) {
#return image-url($path, true);
}
Which will be used to set the paths for images and fonts.
After I build the css file using compass, the output of the css file contains the following paths to the font files
#font-face {
font-family: 'Glyphicons Halflings';
src: url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.eot);
src: url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"), url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.woff) format("woff"), url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.ttf) format("truetype"), url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg");
}
How can I change it so that the source path to become:
src: url(./fonts/bootstrap/glyphicons-halflings-regular.eot)
instead of src: url(/.tmp/styles/fonts/bootstrap/glyphicons-halflings-regular.eot)
Please note that the application.scss was built by grunt-contrib-compass
Thanks.
You should be able to change your compass configuration and set the fonts_dir to be 'fonts' instead of (as it seems) '.tmp/styles/fonts'.

Rails: Foundation-Icons should work in production... but it doesn't

I followed every single tutorial on internet to make foundation icons work in production mode but I failed every time.
I do not want to use any gemify css library, that will simply not work if rails does not serve the assets.
#app/assets/fonts
- foundation-icons.eot
- foundation-icons.svg
- foundation-icons.ttf
- foundation-icons.woff
#app/assets/stylesheets/foundation-icons
#font-face {
font-family: "foundation-icons";
src: font-url("foundation-icons.eot");
src: font-url("foundation-icons.eot?#iefix") format("embedded-opentype"),
font-url("foundation-icons.woff") format("woff"),
font-url("foundation-icons.ttf") format("truetype"),
font-url("foundation-icons.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
.fi-address-book:before,
....
#config/application.rb
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
If I run the command:
RAILS_ENV=production rake assets:precompile
I obtain:
#public/assets/
- foundation-icons-7eadaa6a15e069d84c07540345524b0e.eot
- foundation-icons-7eadaa6a15e069d84c07540345524b0e.ttf
- foundation-icons-7eadaa6a15e069d84c07540345524b0e.woff
- foundation-icons-ffbd67b2dc2f5e03fca68691f97f051d.svg
My page layout will render the sprokets manifest
<%= stylesheet_link_tag "main/manifest/about_manifest" %>
that contain the lines:
*= require foundation_and_overrides
*= require foundation-icons
If I take a look to my about_manifest-90e09360ea22dff94eb45a5550df521b.css
#font-face {
font-family: "foundation-icons";
src: url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.eot);
src: url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.eot?#iefix) format("embedded-opentype"), url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.woff) format("woff"), url(/assets/foundation-icons-7eadaa6a15e069d84c07540345524b0e.ttf) format("truetype"), url(/assets/foundation-icons-ffbd67b2dc2f5e03fca68691f97f051d.svg#fontcustom) format("svg");
font-weight: normal;
font-style: normal; }
When I run in production with
RAILS_ENV=production rails s
I have no warning in my chrome console. All assets are found but my icons looks like squares.
The code to include the icon is
<i class="fi-mail"></i>
#production.rb
config.serve_static_assets = true #This one will be false with passenger
config.assets.digest = true
config.assets.compile = false
Please help.
PS: I should say also that I use a custom font for my text and it work perfectly.

Resources