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.
Related
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');
}
I've seen several questions asked here and on other blogs but it didn't solve my case. This is my syntax:
#font-face {
font-family: "texgyreheroscn";
src: url("texgyreheroscn-italic-webfont.eot");
src: url("texgyreheroscn-italic-webfont.eot?#iefix") format("embedded-opentype"),
url("texgyreheroscn-italic-webfont.woff") format("woff"),
url("texgyreheroscn-italic-webfont.ttf") format("truetype"),
url("texgyreheroscn-italic-webfont.svg#texgyreheroscnitalic") format("svg");
font-weight: normal;
font-style: italic;
}
this works everywhere except in IE9 (IE8 works too). The syntax looks fine to me, the .eot file is on the server and has permissions to be accessed.
i've tried
adding src: local('☺︎'), - this breaks the font for every browser (as seen on #font-face works in IE8 but not IE9)
asked the backend guys if the .eot font was there and was accessible and the answer is YES
substituted the " with '
added format("embedded-opentype") on the first src: line
nothing seems to work for me. any heads up on this? thanks
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'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.
I have a directory called project and in it i have the directories html,assets and javascript.The assets directory has the directories fonts and css.The css directory has a css file called typography.css.The fonts directory has all the fonts i am using.
Inside the html directory i have a file typography.html. To use the fonts i am using this code inside typography.css which is correctly linked/referenced in my html file.However this code inside typography.css
#font-face {
font-family: "LatoLight";
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), url('../fonts/lato-light-webfont.woff') format("woff"), url('../fonts/lato-light-webfont.ttf') format("truetype"), url('../fonts/lato-light-webfont.svg') format("svg");
}
h1{ font-family: LatoLight !important; }
does not produce the desired result.I am using twitter bootstrap 3.Why is this not working?.
Try:
#font-face {
font-family: 'LatoLight';
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"),
url('../fonts/lato-light-webfont.woff') format("woff"),
url('../fonts/lato-light-webfont.ttf') format("truetype"),
url('../fonts/lato-light-webfont.svg') format("svg");
font-weight: normal;
font-style: normal;
}
I've switched double quotes to single. It MIGHT make a difference but i am not sure.
otherwise this might help Bootstrap 3 unable to display glyphicon properly i know it's glyphicons but firefox might just be having issues regarding other fonts.
I think it could be as simple as putting quotes around the font you want when you reference it.
h1{ font-family: "LatoLight" !important; }