Recently I migrated my (Extjs) WebSite from HTTP to HTTPS.
The ExtJs site is owned into an IIS (Web) container.
But now I've errors into the Chrome console, because none of fonts is correctly downloaded.
All works fine before when the site was on HTTP mode.
Should I change the call to the font in my css file ?
Or should have a specific clause into the web.config for font files ?
Error :
Failed to decode downloaded font: https://.../resources/fonts/open-sans/OpenSans-Light.ttf
OTS parsing error: invalid version tag
Failed to decode downloaded font: https://.../resources/fonts/entypo-font/font/entypo.woff
OTS parsing error: invalid version tag
...
Extract of CSS file
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/open-sans/OpenSans-Light.ttf') format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
Related
In my Rails 5 app, I have this in my application.sass file...
/*
*= require bootstrap-sass-official
...
*/
#font-face
font-family: 'Glyphicons Halflings'
src: url('/assets/glyphicons-halflings-regular.eot')
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')
...as per the advice in Ruby on Rails Bootstrap Glyphicons not working. I get this error in my Chrome console: Failed to decode downloaded font: http://localhost:3000/assets/glyphicons-halflings-regular.woff, etc.. for the various font formats.
Do I need to put anything into my Rails assets fonts folder? If so, what specifically? Thanks so much for any help on this.
As the application is Rails 5, better way - place your fonts in the folder app/assets/fonts.
If you want to place them outside fonts folder, you'll need to add the following configuration:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
And then can use urls as your mentioned
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?iefix') format('eot'),
url('/assets/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I added custom fonts in my rails app, in a folder webfonts in assets.
In my file _variables.scss (in the folder stylesheets/config), I added this code:
#import url("//hello.myfonts.net/count/2ff6c8");
#font-face {font-family: 'Variable-Regular';
src: url('webfonts/2FF6C8_0_0.eot');
src: url('webfonts/2FF6C8_0_0.eot?#iefix') format('embedded-opentype'),
url('webfonts/2FF6C8_0_0.woff2') format('woff2'),
url('webfonts/2FF6C8_0_0.woff') format('woff'),
url('webfonts/2FF6C8_0_0.ttf') format('truetype');
}
It works in my development environnement, but not in my production environnement. What should I do to make it work on Heroku?
It depends on exact error. Maybe there are not proper headers and thus font files are not loading. You could try font_assets gem in this case.
Using Rails 4
I have read lots of threads on how to get my custom fonts working in heroku. They work locally in dev mode but when pushed to heroku they dont show up.
my #font-face located in master stylesheet
#font-face {
font-family: 'caviar_dreamsregular';
src: font-url('caviardreams-webfont.eot');
src: font-url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
font-url('caviardreams-webfont.woff') format('woff'),
font-url('caviardreams-webfont.ttf') format('truetype'),
font-url('caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
font-weight: normal;
font-style: normal;
}
Application.rb
config.assets.paths << "#{Rails.root}/app/assets/fonts"
I have precompiled assets with
rake assets:precompile
No errors in Heroku logs.
Cant figure this out, does anyone have any suggestions?
UPDATE:
Visited the site on my phone and the font works... Cleared cache on computer, still not working on computer.
This could be down to several issues; most notably, I would recommend you're not using dynamic asset paths:
Fingerprinting
Rails uses asset fingerprinting when you precompile assets
The reason for this is to allow each asset to be individually allocated to the system, thus providing a more robust structure (or something). Basically, it adds an MD5 hash to the end of your asset filenames:
global-908e25f4bf641868d8683022a5b62f54.css
Paths
Because dynamic fingerprinting makes all precompiled assets have different names, you need to use Rails' dynamic path helpers:
#app/assets/stylesheets/application.css.scss
#font-face {
font-family: 'caviar_dreamsregular';
src: asset-url('caviardreams-webfont.eot');
src: asset-url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
asset-url('caviardreams-webfont.woff') format('woff'),
asset-url('caviardreams-webfont.ttf') format('truetype'),
asset-url('caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
font-weight: normal;
font-style: normal;
}
You'll need to use a dynamic stylesheet engine such as SASS to handle the dynamic paths
I am trying to load some additional fonts in my rails application using:
Jruby 1.7.3
Rails 3.2.13
The css (its type is css.scss.erb) document is in app/assets/stylesheets/custom/ folder and looks like follows:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url('<%= asset_path('/fonts/Lato-Light.woff') %>') format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('<%= asset_path('/fonts/Lato-Regular.woff') %>') format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url('<%= asset_path('/fonts/Lato-Bold.woff') %>') format('woff');
}
The fonts file are in application lib/assets/fonts folder. I have added the following line in my application.rb file:
config.assets.paths << Rails.root.join('lib', 'assets', 'fonts')
I am not getting an request error, so I suppose that my fonts are rendered in the web page but they are not applied. That's the path that the asset_path method generates in the result css file:
Has anyone idea what I am doing wrong?
As I have read from Rails 3.1:
The public folder is no longer the supported place for CSS, images and
fonts, instead they live in the app/assets/* and vendor/assets/*
folders.
So, to set up new fonts, I have followed the steps below:
download the desire font from http://www.google.com/fonts
convert each file -
http://www.fontsquirrel.com/tools/webfont-generator
copy all *.eot, *.svg, *.ttf, *.woff files in /vendor/assets/fonts
folder
create fonts.css.scss file in the /assets/stylesheets/custom/ folder
as follows:
#font-face {
font-family: 'RobotoCondensed';
src: asset-url('robotocondensed-regular-webfont.eot', 'font');
src: asset-url('robotocondensed-regular-webfont.eot?#iefix', 'font') format('embedded-opentype'),
asset-url('robotocondensed-regular-webfont.woff', 'font') format('woff'),
asset-url('robotocondensed-regular-webfont.ttf', 'font') format('truetype'),
asset-url('robotocondensed-regular-webfont.svg#roboto_condensedbold','font') format('svg');
font-weight: normal;
font-style: normal;
}
Source: http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/
I have a few licensed fonts that I have embedded into my Rails app using the CSS #font-face tag. These fonts are located in the "../Public/Fonts/" path in my Rails 3 app and render perfectly on any local machine that I pull down the repo and run on.
However when I push my app to Heroku it can't seem to find the fonts. You can tell that it's looking in the font directory but can never access them. It doesn't seem to matter where I place the fonts or how I type the font path in the #font-face declaration.
My fonts are located at #{RAILS.root}/public/fonts/ChunkFive
Here is my #font-face declaration:
#font-face {
font-family: "ChunkFive";
src: url("../fonts/ChunkFive/ChunkFive-webfont.eot");
src: local("?"),
url("../fonts/ChunkFive/ChunkFive-webfont.woff") format("woff"),
url("../fonts/ChunkFive/ChunkFive-webfont.ttf") format("truetype"),
url("../fonts/ChunkFive/ChunkFive-webfont.svg") format("svg");
}
Here is the 404 resource not found message I get for each font:
Request URL:http://thedanbarrett.heroku.com/fonts/ChunkFive/ChunkFive-webfont.woff
Request Method:GET
Status Code:404 Not Found
Request Headers
Referer:http://thedanbarrett.heroku.com/home
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.10
(KHTML,like Gecko) Chrome/8.0.552.224 Safari/534.10
Response Headers
Age:0
Connection:keep-alive
Content-Length:727
Content-Type:text/html
Date:Wed, 05 Jan 2011 15:25:21 GMT
Server:nginx/0.7.67
Via:1.1 varnish
X-Runtime:0.001344
X-Varnish:764492621
The strange thing is that it finds and loads stylesheets, icons, and images in the same root folder. Just to reiterate the fonts embed and work perfectly run from a local server, even on hosts that don't have the font installed.
I did find one reference online to someone that was having a similar issue who changed their config.ru and environment.rb files to make it friendly with Heroku, but I can't seem to find it.
Thanks in advance SO minions for all your help!
~Dan
So it turned out the root for resources was set to Public/Stylesheets so my path declaration in the font-face section was nonsensicalness. I took the easy out and moved the fonts under the stylesheets directory and everything works perfectly now!
Here's an example that is working on Heroku: http://www.arailsdemo.com/posts/12
Here is the corresponding stylesheet http://www.arailsdemo.com/stylesheets/application.css
I don't remember needing any configuration changes. Hopefully, it helps.
Fonts directory: app/assets/fonts/
Add the line below to production.rb
config.serve_static_assets = true
In your styles.css.scss
#font-face {
font-family: "mycustomfont";
src:url(asset_path("mycustomfont.eot"));
src:url(asset_path("mycustomfont.eot?#iefix")) format("embedded-opentype"),
url(asset_path("mycustomfont.ttf")) format("truetype"),
url(asset_path("mycustomfont.svg#mycustomfont")) format("svg"),
url(asset_path("mycustomfont.woff")) format("woff");
font-weight: normal;
font-style: normal;
}
Environment: Rails 4.0.1 Ruby 2.0.0-p247
It should work on heroku :)