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?
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!
I rely heavily on Google Webfonts for my site and (unfortunatly) google chrome presents them badly, i have set font-smooth to always, but it dosen't seem to help.
EXAMPLES:
Is there any way i could smooth them / make them look better??
Thanks,
Font rendering problems are common in GChrome, try changing the order of your #font-face sources... Chrome utilises the .svg file in the #font-face sources, in some reason it doesn´t tolerate .svg being called last in the list
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
url('../fonts/my-dirty-font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
If the order #font-face order looks similar then try changing to
#font-face {
font-family: 'my-dirty-font';
src: url('../fonts/my-dirty-font.eot');
src: url('../fonts/my-dirty-font.eot?#iefix') format('eot'),
url('../fonts/my-dirty-font.svg') format('svg');
url('../fonts/my-dirty-font.woff') format('woff'),
url('../fonts/my-dirty-font.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Personally I would use
http://www.fontsquirrel.com/
It's all hosted on your server and it's compatible with nearly every browser! Since using Font Squirrel I haven't looked elsewhere.
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);
I have tried reading multiple articles on how to deal with custom fonts in IE, but they never seemed to work for me. I tried converting the fonts to EOT, but that didn't seem to work either. I am not sure what I am doing wrong, so I will post my code
#font-face {
font-family: "Klavika Regular";
src: url('../fonts/klavika.eot');
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
font-weight: normal;
font-style: normal;
}
this works in ie8/9
http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html
#font-face {
font-family: 'AftaserifRegular';
src: url('AftaSerifThin-Regular-webfont.eot');
src: url('AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('AftaSerifThin-Regular-webfont.woff') format('woff'),
url('AftaSerifThin-Regular-webfont.ttf') format('truetype'),
url('AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
if IE8 thinks it supports any other format other than eot of the ones listed below, then it will probably try to use that one. Maybe you could use a IE8 hack, like
src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
src /*\**/: url('../fonts/klavika.eot')\9
so only IE8 will read the last src line and thus load the .eot.
Try three kinds of CSS Formats for #font-face on FontSquirrel Generator (in "EXPERT..." mode > in section "CSS Formats:" > "more information")
It's worth checking to see if your .htaccess file allows the file type.