I used font-squirrel to generate web fonts and specify CSS declarations for the font, but it still uses the fallback fonts when I view the page in IE9 using IE7 or IE8 browser and document mode. Any idea what's going on? Here's my code (and a screenshot):
#font-face {
font-family: 'cubanoregular';
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cubano { font-family: 'cubanoregular' }
If the code you put above is accurate, then the only problem is that your path to the eot file is incorrect:
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');...
Fix that, and it should work fine. IE has supported #font-face since version 5 I believe, but in versions prior to 9 only eot is supported.
Nothing wrong with your code, the problem seems to be the font. But it's on Typekit if you want.
check your src path is correct
src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
probably needs to be
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');
Related
I cannot use font-awesome with Oracle ADF 12c.
i found many tutorials and i try to do it but i cannot success like this
https://www.youtube.com/watch?v=Hk5giHC1hJM
this URLs could not readable in JSF Page.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
so i want example if any one do it before ?
Thanks ...
Are you using JDeveloper 12 or an older version?
This won't work with an older version.
The steps are listed here:
https://blogs.oracle.com/shay/leveraging-icon-fonts-font-awesome-in-oracle-adf-500-new-icons-for-your-app
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 have have "Gulim", a custom font, embedded into my website at mangodownload.com (you can see it on the homepage, if you see Arial, it does not work on your browser.)
Unfortunately, this font does NOT work on many browsers.
Here is my CSS for the font:
#font-face {
font-family: "Gulim";
src: url("/style/fonts/Gulim.ttf");
src: local("Gulim"), url("/style/fonts/Gulim.ttf") format("truetype");
}
Any ideas on achieving cross-browser support for ALL browsers?
PLEASE NOTE: I have tried converting the font, and tried FontSquirrel. I keep receiving the same message; 'font size too large'. My gulim.ttf file is 10mb.
#font-face {
font-family: 'yourfunkyfont';
src: url('fonts/yourfunkyfont.eot');
src: url('fonts/yourfunkyfont.svg') format('truetype'),
url('fonts/yourfunkyfont.eot?#iefix') format('embedded-opentype'),
url('fonts/yourfunkyfont.woff') format('woff'),
url('fonts/yourfunkyfont.ttf') format('truetype'),
url('fonts/yourfunkyfont.svg#yourfunkyfont') format('svg');
}
this will work only if you add the following MIME-types in your IIS (other webserver):
.woff - application/x-font-woff
.svg - application/x-font-woff
There is no way to do this cross-browser unless you can get your font in the various formats required by various browsers. The CSS to use is as follows:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
As you can see, you need the font in eot, woff, ttf and svg formats.
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.