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'.
Related
I'm new to Webpack and I'm trying to load the stylesheet of a plugin lightgallery installed through yarn add.
I can successfully load the JavaScript. However, the stylesheet crashes when trying to load a font:
Error: Cannot find module '../fonts/lg.woff2?io9a6k'
It gets loaded as follows:
app/views/layouts/application.html.erb:
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
app/assets/javascript/packs/application.scss:
#import "bootstrap";
#import "lightgallery/scss/lightgallery.scss";
Bootstrap loads fine.
In lightgallery/scss/lightgallery.scss:
#import 'lg-variables';
#import 'lg-mixins';
#import 'lg-fonts';
#import 'lg-theme-default';
// Core
#import 'lightgallery-core';
In lightgallery/scss/_lg-fonts.scss:
#font-face {
font-family: 'lg';
src: url('#{$lg-path-fonts}/lg.woff2?io9a6k') format('woff2'),
url('#{$lg-path-fonts}/lg.ttf?io9a6k') format('truetype'),
url('#{$lg-path-fonts}/lg.woff?io9a6k') format('woff'),
url('#{$lg-path-fonts}/lg.svg?io9a6k#lg') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
The folder lightgallery/fonts contains the files, not sure what the parameter ?io9a6k is for
How can I get the stylesheets loading correctly?
I got it working using resolve-url-loader to fix relative paths in SCSS:
yarn add resolve-url-loader
In config/webpack/environment.js:
const { environment } = require('#rails/webpacker')
// https://github.com/sachinchoolur/lightGallery/issues/1039
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
const webpack = require('webpack')
module.exports = environment
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
I have
users.scss
#font-face {
font-family: scriptina;
src: asset-url('scriptina.ttf')
}
.script {
font: scriptina, cursive;
}
Which generates
#font-face {
font-family: scriptina;
src: url(/scriptina.ttf);
}
/* line 18, C:/Users/Chloe/workspace//app/assets/stylesheets/users.scss */
.script {
font: scriptina, cursive;
}
But http://localhost:3000/scriptina.ttf generates
Routing Error
No route matches [GET] "/scriptina.ttf"
$ ls app/assets
config images javascripts scriptina.ttf stylesheets
Rails 5
Reference: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
One method (outlined here) would be to add a fonts folder to app/assets, and then add it to the folders that your app will look for assets in by editing config/application.rb:
# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
Then move scriptina.ttf into app/assets/fonts and your asset-url helper will then be referencing a valid path to your font.
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/
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.