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.
Related
There are two fonts that, although they are appearing on the site just fine, are producing errors in DevTools.
#font-face {
font-family: Impact;
src: url(../fonts/impact-webfont.eot);
src: url(../fonts/impact-webfont.eot?#iefix) format('embedded-opentype'),
url(../fonts/impact-webfont.woff) format('woff'),
url(../fonts/impact-webfont.ttf) format('truetype'),
url(../fonts/impact-webfont.svg#impactregular) format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: kmi-genericons;
src: url(../fonts/kmi-genericons.eot?70543738);
src: url(../fonts/kmi-genericons.eot?70543738#iefix)
format('embedded-opentype'),
url(../fonts/kmi-genericons.woff2?70543738) format('woff2'),
url(../fonts/kmi-genericons.woff?70543738) format('woff'),
url(../fonts/kmi-genericons.ttf?70543738) format('truetype'),
url(../fonts/kmi-genericons.svg?70543738#kmi-genericons) format('svg');
font-weight: 400;
font-style: normal;
}
The paths in the console errors are incorrect. The CSS snippet above is found in /wp-content/themes/kmi/css/compiles.min.css. Since the path is relative, it should be loading from /wp-content/themes/kmi/fonts/. The network tab shows it's recognizing the correct path as well:
So it's like there are 2 requests for the same font: one at the correct relative path, and one at an incorrect root path. Why would this be?
Turns out, Nehemiah was correct in his comment on my question. This CSS was being inserted via JavaScript through a plugin (Above the Fold Optimization), which I didn't realize, in addition to being called from a regular <link> tag. Thus, it was loading twice, and the relative path did not resolve when inserted via JavaScript.
Sorry for missing this - thank you!
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 have my font in all of the formats known to man, and for some reason they will not load on any windows browser. Here is my code:
#font-face {
font-family: 'AvenirNext-Regular';
src: url('/avenir/AvenirNext-Regular/AvenirNext-Regular.eot');
src: url('/avenir/AvenirNext-Regular/AvenirNext-Regular.woff2') format('woff2'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.ttf') format('truetype'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg'),
url('/avenir/AvenirNext-Regular/AvenirNext-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
It's probably something small but I cannot figure out what it is.
In most cases, URLs shouldn't start with /, as the operating system will understand them as absolute paths. Is the avenir folder in the root of the site?
I was finally able to get my site to show an Arabic font, but it is a default font that I don't want.
With the help of the SO community I found out about Dejavu fonts. I went to their website and downloaded a sans serif zipped folder. I am assuming I have to upload something to my server. If so which file/s do I upload? And what do I write in my html file to "reference" the fonts to my site? I opened all the files in the zip folder and only one of them indicated that I can download the font. But I don't need to download it on my computer. I need to upload it to the cloud so that it will be on my website.
Any ideas?
Also How can I upload the Dejavu folder here so that people can see it and know what I am talking about?
#font-face and #font-face Font Squirrel Generator
If you wish to use font embedding (and #font-face), then you need to present the font in different formats if you wish cover most platforms. See e.g. The Essential Guide to #font-face.
But there’s a much simpler way: just declare your preferred fonts (after checking that each of them covers all the characters you use) in your font-family declaration in CSS. Not all people would then see the text in DejaVu (only those who have got it along with e.g. Linux of OpenOffice or who have separately downloaded an installed it). The overhead of downloading a largish font, or several fonts, is not ignorable, especially when using e.g. slow mobile connections.
Expanding on bookcasey's point:
Check out the #font-face kits at Font Squirrel. There are several DejaVu kits available. Kits include the CSS and the DejaVu files in pretty much every available format you can use on the web. Put the font files in whatever folder you like and alter the CSS accordingly.
For example, I store my font definitions in /css/fonts.css and my fonts in /fnt/FontName/
From fonts.css
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Oblique-webfont.svg#DejaVuSansOblique') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-Bold-webfont.svg#DejaVuSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DejaVu Sans';
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot');
src: url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.woff') format('woff'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.ttf') format('truetype'),
url('../fnt/DejaVuSans/DejaVuSans-BoldOblique-webfont.svg#DejaVuSansBoldOblique') format('svg');
font-weight: bold;
font-style: italic;
}
Using the font is then simply:
body {
font-family: 'DejaVu Sans',sans-serif;
}
I'm having trouble using the following #font-face declaration to work with my Rails 3.1 app. I put the fonts in the Asset Pipeline in its own folder called "Fonts" alongside images and stylesheets and javascripts
Here is the declaration I used (generated by Font Squirrel.)
#font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive-webfont.eot');
src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('Chunkfive-webfont.woff') format('woff'),
url('Chunkfive-webfont.ttf') format('truetype'),
url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Anyone successfully utilize #font-face on their Rails 3.1 app?
Update
I just read this thread http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ that said to change url to font-url in the declarations. That didn't seem to work either unfortunately.
You have to add the folder to the assets path (to file config/application.rb), see Rails Guides
config.assets.paths << "#{Rails.root}/app/assets/fonts"
And you should use the asset_path helper:
src: url('<%= asset_path('Chunkfive-webfont.eot') %>');
I know this is an old question, but I just stumbled across this issue with rails 3.2, and after reading the link to the documentation posted previously, there was no need to edit the application.rb. All I needed to do was do the following in my stylesheet (using sass)
#font-face {
font: {
family: 'Junction';
weight: 'normal';
style: 'normal';
}
src: asset-url('Junction-webfont.eot', font);
src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
asset-url('Junction-webfont.woff', font) format('woff'),
asset-url('Junction-webfont.ttf', font) format('truetype'),
asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}
So instead of using url, I used the generic asset-url, which takes 2 arguments, the file and the asset class, in this case 'font'.
From Rails 3.1 and above you can call font-url directly. Like this:
#font-face {
font-family: 'ChunkFiveRegular';
src: font-url('Chunkfive-webfont.eot');
src: font-url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
font-url('Chunkfive-webfont.woff') format('woff'),
font-url('Chunkfive-webfont.ttf') format('truetype'),
font-url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Expect your final css to look like that:
#font-face {
font-family: 'ChunkFiveRegular';
src: url(/assets/Chunkfive-webfont.eot);
src: url(/assets/Chunkfive-webfont.eot?#iefix) format('embedded-opentype'),
url(/assets/Chunkfive-webfont.woff) format('woff'),
url(/assets/Chunkfive-webfont.ttf) format('truetype'),
url(/assets/Chunkfive-webfont.svg#ChunkFiveRegular) format('svg');
font-weight: normal;
font-style: normal;
}
Usually works :)
Using Rails 4.0 (don't know if this is specific to 4, but anyway), I was only able to make it work with url(font_path('font-name.ttf')). Adding the fonts path to the assets path was not necessary either (config.assets.paths << "#{Rails.root}/app/assets/fonts").
So, to me this is what worked:
#font-face {
font-family: 'ChunkFiveRegular';
src: url(font_path('Chunkfive-webfont.eot'));
src: url(font_path('Chunkfive-webfont.eot?#iefix')) format('embedded-opentype'),
url(font_path('Chunkfive-webfont.woff')) format('woff'),
url(font_path('Chunkfive-webfont.ttf')) format('truetype'),
url(font_path('Chunkfive-webfont.svg#ChunkFiveRegular')) format('svg');
font-weight: normal;
font-style: normal;
}
I just updated that article on Atomic Object's Spin blog. Here is the CSS converted (You were looking at the Sass syntax)
#font-face {
font-family: "Merriweather";
src: url(/assets/merriweather-black-webfont.eot);
src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
font-weight: 900;
font-style: normal;
}
I'm using 3.1.1 and have my fonts under vendor/assets/store (Spree implementation). The solutions given here did not work for me and I eventually just tried what ended up being my solution - there was no need for
Here's an example of my src attribute for EOT:
src: url('1617A5_4.eot');
I'm a little bit confused by this but it seems like once assets are compiled the assets are all copied in to their parent folder (assets/store/) at which point the stylesheet can just pick them up.
While this is late, you could use Compass's +font-face mix-in to avoid all this trouble. The mixin helps your life easier by
Not remember the awful caveats of the traditional font-face decleration
It internally handles url_helper and format declarations for you
It's far easier to remember
It is declared the following way madams and gentlemen:
+font-face("#{$font-name}",
font-files("#{$font-name}.woff", woff,
"#{$fontFileName}.ttf", ttf,
"#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);