Scenario: I have a Rails 4.0.0 application, deploying with capistrano, which precompiles my assets on my production server.
Problem: I'm trying to add a font and use it with #font-face. It works locally, but not in production.
Error message: "Failed to load resource: the server responded with a status of 404 (Not Found) "
My fonts are located in app/assets/fonts/
My relevant files:
app/assets/stylesheets/application.css.scss:
/*
* This is a manifest file yada yada yada...
*
*= require bootstrap
*= require_self
*= require_tree .
*/
#font-face {
font-family: 'stone_sansregular';
src: url(font-path('stone_sans_regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
url(font-path('stone_sans_regular-webfont.woff')) format('woff'),
url(font-path('stone_sans_regular-webfont.ttf')) format('truetype'),
url(font-path('stone_sans_regular-webfont.svg') + "#stone_sansregular") format('svg');
}
config/application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
I have looked for answers in several SO posts and other sources but I can't seem to get it right. Btw, I am not deploying on Heroku. What am I missing? I appreciate your help.
EDIT: In production, I find the fonts where I assume they should be: my-rails-app/current/public/#assets/fonts
I just recently fixed a similar issue once I realized my font-awesome.css file was not actually getting loaded in production. I had to do
*= require font-awesome.css
instead of
#import "font-awsome.css";
in my application.css.scss manifest.
Also, as for the MD5 hash that gets added on to file names, I'm not sure if that is an issue or not, but I ended up doing:
font-url('fontawesome-webfont.eot');
rather than
url(font-path('fontawesome-webfont.eot')
So if that was even an issue, I'm fairly certain using font-url will handle it properly.
Related
my custom font is not working, unless I install it manually in my computer.
//my css file//
#font-face {
font-family:'PROGRESS PERSONAL USE';
src: url('Progress.woff2')format('woff2'),
url('Progress.woff')format('woff'),
url('Progress.ttf') format('ttf');
}
Font family name is correct because, I opened the file font to check the correct spelling and also it shows correctly in the browser if I install the font and use it as:
h1{
font-family: "PROGRESS PERSONAL USE"
}
I thought that the problem was the path of the font files, so I placed them in the same folder and level as the CSS file. I also tried adding a / to the path like url('/Progress.woff2')format('woff2')... in front. Cleared caché, changed browser, and tried in mobile But not working.
Also in my browser inspector/Network shows that the fonts are found when refreshing the browser:
Request URL: http://localhost:8000/Progress.woff2
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
Would be happy to get help with this!
The self-hosted fonts in Gatsby should be located in the static folder.
So I placed the files in the path:
--> static/fonts/Progress.woff2
-->static/fonts/Progress.woff
-->static/fonts/Progress.ttf
and then in my globalStyles.css which is in my src/ (not in the static folder) I place it like this:
#font-face {
font-family:"PROGRESS PERSONAL USE";
src: url('/fonts/Progress.woff2')format('woff2'),
url('/fonts/Progress.woff')format('woff'),
url('/fonts/Progress.ttf') format('ttf');
}
If you don't have a global css file you can define one for the fonts, and import it in your gatsby-browser.js.
Also there is the option of using the web fonts gatsby pluggin which is explained here
I use laravel framework. But in chrome console this error happening and font-family not working.
Failed to load resource: the server responded with a status of 500 (Missing Content-Type Header)
In css:
#font-face{
font-family: 'HelveticaNeue';
src: url(../fonts/HelveticaNeue.otf);
}
After searching I found that adding format() can solve problem. and I changed to this :
#font-face{
font-family: 'HelveticaNeue';
src: url(../fonts/HelveticaNeue.otf) format(opentype);
}
Now error not showing in console but font-family still not working.
My file structure is:
public
css
fonts
Thanks.
If you don't get a 404 error for the asset, the issue is probably Chrome not liking the .otf font format.
You can generate a complete set of webfont types using the FontSquirrel Webfont generator: https://www.fontsquirrel.com/tools/webfont-generator
If you do get a 404 error you may need to add the necessary mimetypes for your server to be able to serve the fonts. Check out this little guide for how to enable this for apache or nginx:
https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts
Either way it's always worth having your .ttf and .woff fonts for cross browser compatibility, so definitely generate a complete font kit over at FontSquirrel.
I am trying to upgrade grails project from 2.x.x to 3.1.8 and my font-awesome is not resolved. I downloaded font-awesome zip from internet and put fonts to file to /assets/fonts and than I put font-awesome.css to my css.
I also added added:
grails.resources.adhoc.patterns = ['/images/', '/css/', '/js/', '/plugins/', '/fonts/*']
grails.resources.adhoc.includes = ['/images/', '/css/', '/js/', '/plugins/', '/fonts/**']
to my application.groovy.
Here is my error:
Failed to decode downloaded font: http://localhost:8080/dist/tjicons.ttf?bf6f8c5837e0c76e84bd8c564a18c8e5(index):1 OTS parsing error: invalid version tag
Any ideas?
PS: Resource plugin was used in grails 2.
EDIT:
Font-awesome.css:
#font-face {font-family: 'FontAwesome';src: url('../fonts/fontawesomewebfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');font-weight: normal;font-style: normal;
application.css:
*= require_self
*= require bootstrap
*= require font-awesome
*= require_tree .
I made an rails (4.2.4) app which work fine in development environment but when I deployed it on digital ocean it doesn't get fonts, with an error like
Failed to load resource: the server responded with a status of 404 (Not Found)
with path like
http://Server-IP/assets/raleway-bold.woff2
I tried many combinations to provide path but all in vain except one, which works in development but not in production.
I have little different structure for assets
assets
- fonts
- javascripts
- stylesheets
- admin
- web
- application.js
- fonts.cs
- application.cs
and in fonts.cs I am providing path like
#font-face {
font-family: 'dpdidot_htfm96medium';
src: url('/assets/dp_didot-htf-m96-medium-webfont.eot');
src: url('/assets/dp_didot-htf-m96-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/dp_didot-htf-m96-medium-webfont.woff2') format('woff2'),
url('/assets/dp_didot-htf-m96-medium-webfont.woff') format('woff'),
url('/assets/dp_didot-htf-m96-medium-webfont.ttf') format('truetype'),
url('/assets/dp_didot-htf-m96-medium-webfont.svg#dpdidot_htfm96medium') format('svg');
font-weight: normal;
font-style: normal;
}
Whats wrong with it
Got it. The default precompiling assets with Rails will only generate application.js and application.css. If you want the precompile generate unpacked assets like the fonts, add it to the Rails.application.config.assets.precompile this is the example. You can add this to assets.rb
Rails.application.config.assets.precompile += ['*.js', '*.css', '*.woff2', '*.woff']
I've started using glyphicons in my meteor project with the twbs:boostrap package. Ever since I started using them I've been receiving the following warnings in my console:
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.ttf
OTS parsing error: invalid version tag
What is causing this and how can I suppress these warnings or solve the problem? The glyphicons work perfectly fine, it's just a pain to see the warnings all the time though.
This means that the package you are using to import glyphicons has a bug in it and does not properly declare the font files' locations or does not have the font files properly added to the package itself.
Check the package maintainers issue tracker and in the meantime, download the glyphicons to your public directory and declare them in your own CSS file.
After trying lots of other approaches, and lots of re-installs and checking meteor plus npm configurations, I have just fixed the issue by clearing out browsing data from Chrome (cached images and files) and then refreshing the page.
Serkan Durusoy's answer above worked for me but here is a bit more detail on what I had to do.
Copy the font files from node_modules/bootstrap/dist/fonts to public/fonts
Add this to my main.css:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('fonts/glyphicons-halflings-regular.eot');
src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I copied the css from node_modules/bootstrap/dist/css/bootstrap.css and changed the path to match where I'd put the fonts.