My custom fonts display in development mode, but in production on Heroku, they don't work. My fonts are in assets/fonts/, and this is part of the code I have:
#font-face {
font-family: 'SamsungOne800';
src: url(/assets/SamsungOne-800_v1.0.eot);
src: url(/assets/SamsungOne-800_v1.0.eot?#iefix) format("embedded-opentype"),
url(/assets/SamsungOne-800_v1.0.ttf) format("truetype"),
url(/assets/SamsungOne-800_v1.0.woff) format("woff"),
url(/assets/SamsungOne-800_v1.0.svg#icofonts) format("svg");
font-weight: normal;
font-style: normal;
}
When I run heroku logs
ActionController::RoutingError (No route matches [GET] "/assets/SamsungOne-800_v1.0.ttf"):
I tried adding gem 'rails_12factor' for production and precompiling assets but nothing changed. Help?
You don't need to specify assets, try changing your urls:
src: url(/assets/SamsungOne-800_v1.0.eot);
to:
src: url('SamsungOne-800_v1.0.eot');
You need to do the same for other url.
Moved all my code from landing.scss to application.css(after renaming it to application.css.scss). Edited my code to a simpler version,
#font-face{
font-family: 'SamsungOne800';
src: asset-url('SamsungOne-800_v1.0.ttf');
}
Related
I am having an issue in my (vite/vue) project, where some of the fonts are not accessed.
// Console error:
Failed to load resource: the server responded with a status of 404 () roboto regular.woff2:1
I believe it could have something to do with how PostCSS renders the URL when it rebundles the CSS.
//This is how I import the fonts in the project:
#font-face {
font-family: 'Roboto';
src: url(../../../assets/fonts/roboto_regular.woff2) format('woff2'),
url(../../../assets/fonts/roboto_regular.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
//This is how it looks in the bundled CSS
#font-face{font-display:swap;font-family:Roboto;font-style:normal;font-weight:700;src:url(roboto_bold.woff2) format("woff2"),url(roboto_bold.woff) format("woff")}
//This is how I believe it should look in the bundled CSS
#font-face{font-family:Roboto;src:url(/resources/assets/roboto_regular.woff2) format("woff2"),url(/resources/assets/roboto_regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
How can I tweak the config so it renders it like the latter (if that's even the issue)
Thank you in advance.
I have a strange error, where some fonts are found but some aren't. Basically I have two fonts font1 (custom font from IconMoon) and Brandon (from fonts.com). My directory structure is
- app
- assets
- fonts
- font1.eot
- ...
- 172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot
- ...
I'm using SCSS to load my fonts:
#font-face {
font-family: 'font1';
src:font-url('font1.eot?-kpzpl9');
src:font-url('font1.eot?#iefix-kpzpl9') format('embedded-opentype'),
font-url('font1.woff?-kpzpl9') format('woff'),
font-url('font1.ttf?-kpzpl9') format('truetype'),
font-url('font1.svg?-kpzpl9#font1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face{
font-family:'Brandon Grot W01 Medium';
src:font-url('172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix');
src:font-url('172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix') format('eot'),
font-path('50ca6f6f-b64d-4af0-9b30-526cf363d87e.woff2') format('woff2'),
font-url('050c2cbf-b818-4b8e-b6d2-71b70478bd9d.woff') format('woff'),
font-url('7da41ce3-b3fd-4fca-a85f-4f3099884c15.ttf') format('truetype'),
font-url('37c88f3d-9532-4547-9e11-7cca7f66048c.svg#37c88f3d-9532-4547-9e11-7cca7f66048c') format('svg');
}
When I try to load the font1 fonts, everything works. But when I try to load the Brandon font I get 404 errors. This is the generated CSS:
#font-face {
font-family: 'font1';
src: url(/assets/font1.eot?-kpzpl9);
src: url(/assets/font1.eot?#iefix-kpzpl9) format("embedded-opentype"), url(/assets/font1.woff?-kpzpl9) format("woff"), url(/assets/font1.ttf?-kpzpl9) format("truetype"), url(/assets/font1.svg?-kpzpl9#font1) format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Brandon Grot W01 Medium';
src: url(/assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix);
src: url(/assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot?#iefix) format("eot"), "/assets/50ca6f6f-b64d-4af0-9b30-526cf363d87e.woff2" format("woff2"), url(/assets/050c2cbf-b818-4b8e-b6d2-71b70478bd9d.woff) format("woff"), url(/assets/7da41ce3-b3fd-4fca-a85f-4f3099884c15.ttf) format("truetype"), url(/assets/37c88f3d-9532-4547-9e11-7cca7f66048c.svg#37c88f3d-9532-4547-9e11-7cca7f66048c) format("svg");
}
Calls to /assets/font1.eot result in a 200 and calls to /assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot result in a 404.
I'm not sure why this happens, because they are in the same directory. The logs look like this
Started GET "/assets/font1.eot" for 127.0.0.1 at 2016-02-05 10:38:22 +0100
Served asset /font1.eot - 304 Not Modified (0ms)
Started GET "/assets/172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot" for 127.0.0.1 at 2016-02-05 10:39:25 +0100
Served asset /172fdde2-f56b-433a-a6e2-ebeab9dfb588.eot - 404 Not Found (6ms)
I'm on Rails 3.2.9
Any ideas on how to debug this issue?
The problem is caused by the hyphens in the name.
If you rename your files to use underscores instead, for example 172fdde2_f56b_433a_a6e2_ebeab9dfb588.eot, and then replace the hyphens with underscores in your css files, everything should work.
It's caused by sprockets trying to strip out fingerprints when resolving the asset. Ultimately it strips out part or all of the filename and then finds no matching file.
I have my font-family in the following order. It works fine in one server but in another server its reading the second font-family(verdana) instead of the first(breuer-text-medium). I have the fonts installed correctly in their locations but not sure what is missing. Can some one please help me.
#font-face {
font-family: "breuer_textmedium";
font-style: normal;
font-weight: normal;
src: url("fonts/breuertext-medium-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/breuertext-medium-webfont.woff") format("woff"), url("fonts/breuertext-medium-webfont.ttf") format("truetype"), url("fonts/breuertext-medium-webfont.svg#breuer_textmedium") format("svg");
}
The problem was with the access privileges to s3 server.
I am using the below font-face rule in my application
#font-face{
font-family: frutilicn;
src: url('../fonts/FrutigerLTW01-47LightCn.eot');
src: url('../fonts/FrutigerLTW01-47LightCn.ttf') format('truetype');
}
When I access the page the font style does not work . I am getting an error in firebug like this:
"NetworkError: 404 Not Found http://localhost/fonts/FrutigerLTW01-47LightCn.ttf"
The 'font folder' is in the same folder as the stylesheet and FrutigerLTW01-47LightCn.ttf is in the font folder
What does that mean and what do I need to do?
Thanks.
We put our purchased fonts (which we embed onto the website) in the root of the site, therefore avoiding issues with relative linking.
#font-face{
font-family: 'Frutiger';
src: url('/FrutigerLTW01-47LightCn.eot');
src: url('/FrutigerLTW01-47LightCn.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
I've used the following code to get a custom font in my website! using the following code!
#font-face{
font-family:portagolTC;
src: url(../font/PortagoITC_TT.woff?) format('woff');
src: url(../font/PortagoITC_TT.eot?#iefix) format('opentype');
}
This works in chrome,ff,IE10,IE9 but not in IE8! What am I doing wrong here? Please correct me if I'm doing anything wrong.
Note : I've googled and found few stackoverflow answers but nothing seems to solve my problem.
CSS3111: #font-face encountered unknown error.
PortagoITC_TT.woff
CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable.
PortagoITC_TT.ttf
CSS3114: #font-face failed OpenType embedding permission check. Permission must be Installable.
PortagoITC_TT.ttf
If IE8 throws the CSS3111: #font-face encountered unknown error, you probably have the non-matching font-family name problem.
To resolve this, you need to edit your font file, define identical names for Fontname, Family name and Name for humans and export your TTF. This can be done using the FontForge application. Afterwards, you than again convert it for web (EOT, WOFF).
More info: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/
Update
Made it working by downloading an own version of the TTF font and converted it for web. The CSS I used:
#font-face {
font-family: 'portagoitc-tt';
src: url('fonts/portagoitc-tt.eot');
src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
url('fonts/portagoitc-tt.woff') format('woff'),
url('fonts/portagoitc-tt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I had trouble with IE8 and had no console error messages. What solved my problem was to alter my #font-face code slightly:
Before:
#font-face {
font-family: "Hero";
src: local("Hero"),
url("../fonts/Hero.eot?"),
url("../fonts/Hero.woff") format("woff"),
url("../fonts/Hero.ttf") format("truetype"),
url("../fonts/Hero.svg#Hero") format("svg");
font-weight: normal;
font-style: normal;
}
After:
#font-face {
font-family: "Hero";
src: url("../fonts/Hero.eot"); /* this line made the difference */
src: local("Hero"),
url("../fonts/Hero.eot?"),
url("../fonts/Hero.woff") format("woff"),
url("../fonts/Hero.ttf") format("truetype"),
url("../fonts/Hero.svg#Hero") format("svg");
font-weight: normal;
font-style: normal;
}
Although my company bought the font, all formats (eot, woff etc), I didnt got it to work in IE8 and IE10. I uploaded the ttf format to http://www.fontsquirrel.com/tools/webfont-generator and got a 'webfont'?? version and now it works!!!
Should have watched the console sooner of IE, there is stated permiossion troubles.