The code below should work fine, however, does not take effect.
I've defined the following in application.rb, development.rb, production.rb:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
fonts.scss:
#font-face {
font-family: 'Garamond-Pro-Italic';
src: url('/assets/fonts/Adobe_Garamond_Pro_Italic.ttf') format('ttf');
}
buttons.scss:
.menu-button
{
font-family: 'Garamond-Pro-Italic', sans-serif;
}
Try this in your fonts.scss:
// First line of file:
//= depend_on_asset "Garamond-Pro-Italic.ttf"
#font-face {
font-family: 'Garamond-Pro-Italic';
src: url(font-path('Adobe_Garamond_Pro_Italic.ttf')) format('truetype');
}
In application.scss:
//= require <path_to_scss_file>
You should only need the following line in application.rb:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Of course, make sure Adobe_Garamond_Pro_Italic.ttf is actually in the app/assets/fonts/ directory and not vendor, lib, or public.
If that doesn't work post any asset 404 errors you get in your dev console along with the compiled fonts.scss file.
Related
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 have a Rails 4.1.8 app where I am trying to use custom avenir fonts.
I have added the fonts in 2 places app/assets/fonts & app/assets/stylesheets. I also have added some of these in vendor/assets/stylesheets/fonts.
One of the fonts AvenirLTStd-Heavy.otf is not getting applied somehow.
screen.scss
#font-face {
font-family: "AvenirLTStd-Heavy";
src: url('/assets/fonts/AvenirLTStd-Heavy.otf');
}
.avenir-heavy {
font-family: "AvenirLTStd-Heavy";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
application.rb
config.assets.paths << Rails.root.join(* %w(vendor assets bower_components))
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf .otf)
config/initializers/assets.rb
Rails.application.config.assets.paths << "#{Rails.root}/app/assets/fonts"
Rails.application.config.assets.paths << "#{Rails.root}/vendor/assets/stylesheets/fonts"
Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf .otf)
What am I doing wrong ?
Include your font path in assets precompile paths and just use the font name & specify the format as below:
#font-face {
font-family: "AvenirLTStd-Heavy";
src: url('AvenirLTStd-Heavy.otf') format("opentype");
}
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'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'.
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.