Related
I'm loading external css with link in iframe.
css contains #font-faces
#font-face {
font-family: "MyFont";
font-weight: normal;
font-style: normal;
src: url('/assets/fonts/myFont.woff');
}
and fonts are applied in all browsers except IE 10, 11 (I'm not intrested in below).
The css itself is loaded (other rules are applied in IE too) but #font-faces not.
If I emped font face with hardcore style tag, it works.
<style>
#font-face {
font-family: "MyFont";
font-weight: normal;
font-style: normal;
src: url('/assets/fonts/myFont.woff');
}
</style>
Maybe some one found a way to fix this for external css resource?
You must add your type font with EOT extension font, because IE support Embedded OpenType (EOT) file (.eot or .ote format).
If you do not have .eot or .ote file, convert font in this url everythingfont.
Correct font format,
<style type="text/css" >
#font-face {
font-family: 'Sri-TSCRegular';
src: url('sri-tsc-webfont.eot');
src: url('sri-tsc-webfont.eot?#iefix') format('embedded-opentype'),
url('sri-tsc-webfont.woff') format('woff'),
url('sri-tsc-webfont.ttf') format('truetype'),
url('sri-tsc-webfont.svg#Sri-TSCRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: "Sri-TSCRegular", serif }
</style>
Hope this help you.
Well I believe its a bug in IE and the only workaround is to hardwire css in tag id iframe document's head.
We had the almost the exact same problem. We were using Google's Webfont loader to load css fonts in both the parent and in the iFrame.
The iFrame was cross-domain so we couldn't use the iFrame method built-in to the Webfont api. The iFrame was responsible for loading it's own fonts.
The Webfont loader also provides callbacks for when a font is successfully loaded or not. What we found using IE (specifically version 11) loading the Debugging Tool AFTER the page load, was that the font loader was placing an inactive class on the HTML tag, which means the font did not successfully. If we ran the debugger before the page load, the fonts would magically load as expected and the web font loader would put the Active class on the HTML element, indicating a successful load.
What was stranger still, is when we tried to write the error to the console when a font failed, nothing would happen - never figured out what the issue was with that.
After doing plenty of research, we were able to replicate good behavior if we hard-coded the #FontFace declarations in our page's, head, just as the author of this question did. But since our service has no idea what fonts our users will be using, there is no way hard-coding styles was an option.
In the end, it seems to be some kind of caching bug, since the font loader worked while the debugger was running (apparently IE uses different caching rules while debugging - good idea, NOT). We tried setting No Cache metatags to no avail.
Anyway, the only viable answer I found was here:
IE8 web font iframe bug workarounds
Specifically unloading and reloading your stylesheets:
var sheets = document.styleSheets;
for(var s = 0, slen = sheets.length; s < slen; s++) {
sheets[s].disabled = true;
sheets[s].disabled = false;
}
I hope this helps some other poor coder who has yet again been suckered by the incompetent team over at IE.
I've came across a problem with custom font i use for my website.
So i use following CSS for text.
font-family: "Open Sans",Helvetica,Arial;
font-weight:600;
As website is built in my native language, i have to use UTF-8 symbols, that doesn't seems to be included in Open Sans, so they are being shown in Helvetica instead, but the problem is that they have more weight.
Is there any possible solutions to set font-weight parameter to normal, if fallback font is being used?
You could define a new #font-face for each font you want.
#font-face {
font-family: 'mainFont';
src: url(/*Link to Open Sans*/);
font-weight: 600;
}
#font-face {
font-family: 'secondaryFont';
src: local('Helvetica');
font-weight: 400;
}
#font-face {
font-family: 'tertiaryFont';
src: local('Arial');
font-weight: 600;
}
Then you'll end up with font-family: 'mainFont', 'secondaryFont', 'tertiaryFont'; which should get the desired results.
Unfortunately, there is no way to define fallback font specific styling using CSS alone.
As such you may want to attempt to work out the font being used, then apply a style as a result, see here for one method which works out the width resulting from applying a font to an element before 'best guessing' which it is.
That said, it is essentially a hack/workaround.
Otherwise, you could look into implementing a method to identify where the symbols are and then wrap them in styles span tags, again this would be a fairly dirty hack as opposed to a clean solution.
I believe MichaelM's solution won't work. What you can do is specify the font files using the "postcript name" that you can find in various font info sites online.
font-family: "Open Sans",Helvetica-Light;
unfortunately specifying font-weight: 600 might result in undefined behavior. some browser might try to make it bolder, some might just leave it be.,
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.
I just started using #font-face
This is on top of my css
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
font-family:"Avenir",Helvetica;
background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
color:#321244;
}
and i have this below for a menu on joomla
#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;
this is on the html file
<li class="item23"><span>Menu Item</span></li>
This works in Firefox, but it is not working correctly on Safari or Chrome, the font is correct but the font-weight is not working, i checked on google-chrome developer tool and the computed font weight is 600.
I have tried using 100 or 900 the results on safari and chrome are the same, the font weight wont change.
Is there something wrong with my font-face declaration on top of my css file?
should i try adding something like this
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Heavy.otf);
font-style: bold;
}
I tried but didnt work.
Should i add another font this are that i have on my font directory
AJensonPro-BoldIt.otf AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf AvenirLTStd-Book.otf
AJensonPro-It.otf AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf AvenirLTStd-Roman.otf
Or should i try another font format, something that is not otf, in IE seems to be working althought the width is bigger. I still need to fix that.
As explained here, you have to add
font-weight: normal;
font-style: normal;
inside the #font-face declaration and then use the font-weight:600; on your anchor.
Specifying a numerical value for font-weight is something you do at your peril. Different browsers interpret the values differently, and some don't interpret it as anything at all. You are best going with the standard "bold" ... which browsers get closest to matching in some semi-uniform way. Also, if you are using custom typefaces you should be certain your users have them on their systems. Also, some custom fonts don't respond well to the faux "bold" property. They will have a named "bold" face, like Avenir Bold, Avenir Black, Avenir Demibold, Avenir Demibold Condensed, etc., etc., etc.
Also, always include enough fallback fonts, including, at last, the "serif" or "sans-serif" or "monospace" general font specifier.
Better late than never. Hope this helps:
html { -webkit-font-smoothing: antialiased; }
The idea in the following is the first #font-face is for Firefox, the second for IE, and Arial for anything else that can't make sense of the first two. Its all working except for I want to give a different size in the case of Arial, and haven't figured out the syntax to do that.
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf"); format("truetype");
}
#font-face {
font-family: TribecaIE;
src: url("Tribec0.eot");
}
BODY
{
FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}
I don't believe this is possible with css alone; we will probably need to use javascript.
All we want to do is specify a different font-size if Arial is the active font. Detecting the active font is not exactly straightforward, but here is one method that will work for our particular purpose. We can create a temporary element containing some Arial characters and measure its width, and then create a second element containing characters without specifying a font (so that it defaults to the "active" font) and compare widths. This won't tell us which font is currently active, but can indicate whether or not one of the embedded fonts was loaded with #font-face as they certainly won't have the same width as Arial. If the two elements' widths aren't equal we know that Arial could not have loaded, and so we will only adjust the font-size if the widths are equal.
Even if the browser is unable to load the Arial font, our test is still functional, because when we specify Arial during the test, the browser will default to the same font as it would for the second element. Both elements will still have equal width if the browser is unable to load the embedded fonts with #font-face.
If anyone would like me to further illustrate with code, I'll be happy to write the javascript.
This is not supported by normal CSS rules..
I believe your options are
the font-size-adjust property of css 3
javascript (jQuery), and check for current font to see which one of the three is effective and adjust the font-size accordingly.. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( you should also have a look at the http://www.modernizr.com/ )
I believe it is this (close to what you have):
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf");
}
#font-face {
font-family: Tribeca;
src: url("Tribeca.eot");
}
body {
font-family: Tribeca, Arial;
}
IE won't know how to open the ttf, so it won't bother. Then it will open the eot. Then, you just specify the font by the given name in the body declaration.
Target your browsers by knowing which one reads which type of declaration.
Conditional Comment load different CSS calls.
Then you can specifically tell each one to do something different per rule.
Also there is typekit
#font-face {
font-family: 'Tribeca';
src: url(Tribeca.eot);
src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
}
MSIE will ignore the last line cos it doesn't understand format rule. and yes as pointed by porneL above, format() should go in the src property.
local() will make supporting browsers use local font file if user has it instead of downloading from your server (and probably make IE ignore the line too).
as for the font-size adjustment, as pointed by Gaby: CSS 3 font-size-adjust. but it looks like it's not widely supported, yet.
To void code duplication with #font-face, you can do this via server side. If you use for example some urlrewrite, detect UA, if it's IE - return file with .eot extension, if it's normal browser - ttf.
As for me, it works great.
And for this case, you shouldn't change your css files, just should have 2 files: .ttf & .oet.
Although it's against normal good-practices when using CSS, you could use the !important declaration in your conditional CSS.
As an example, we create two stylesheets: the 'default' one, which will have a section for Firefox-specific styles and an Internet Explorer stylesheet.
Then, using the standard <link rel="" /> method of importing stylesheets:
<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">
<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
Within the 'default' stylesheet, our Firefox styles are wrapped in the following:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This works because the #-moz-document url-prefix() section is how Firefox addons style webpages. So, other browsers don't understand it and therefore just skip it.
BODY
{
FONT: 140% Arial;
FONT: 195% Tribeca,TribecaIE;
}