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.
Related
I have created a javascript direflow application. I am trying to load a local font but haven't been able to.
Below are the details and code snippets I have applied.
Folder Structure
font.css
#font-face {
font-family: 'MyLocalFont';
src: local('MyLocalFont'),
url('./fonts/MyLocalFont.woff') format('woff'),
url('./fonts/MyLocalFont.woff2') format('woff2');
}
direflow-components/testing-component/index.js
plugins: [
{
name: 'font-loader',
options: {
custom: {
families: ['MyLocalFont'],
urls: ['/fonts.css']
},
},
},
],
App.css
.header-title {
font-size: 34px;
color: #5781C2;
font-family: 'MyLocalFont';
}
The font files doesn't load. Please help.
Note: Built a react app using create-react-app there with #font-face changes the fonts load. Something with direflow is not working.
I resolved the issue seems like the plugin font-loader is not required. I removed it from direflow-components/testing-component/index.js.
Another change I made is removed the single quotes from the font-family.
App.css
.header-title {
font-family: MyLocalFont;
}
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
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.
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'.