Rectangle 27 1

i did this: (didn't bother to clean up the code, this could be way better / more universal, but i'll post it anyway, you'll get the idea) it uses document.stylesheets for internet explorer because i didn't get cross domain css load to work with it, and the $.get ajax load of the css for other browsers. didn't check in ie below 8, but i think it even works there. there is some flicker in chrome on windows (vista) but i think a combination of this and google webfont loader would do the trick.

<link rel="stylesheet" href="//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css" />
<script>
var data = "";
try
{
    data = document.styleSheets[document.styleSheets.length - 1].cssText;
    data = data.replace(/url\(/g, 'url(//fast.fonts.net');
    data = data.replace(/font-family: Geom Slab 703 W01 Light;/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family: GeomSlab703W01-LightIta;/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family: GeomSlab703W01-Medium;/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family: GeomSlab703W01-MediumIt;/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family: Geom Slab 703 W01 Bold;/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family: GeomSlab703W01-BoldItal;/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    document.styleSheets[document.styleSheets.length - 1].cssText = data;
}
catch (e)
{
}

$.get(location.protocol + '//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css', function(data) {
    data = data.replace(/url\("/g, 'url("//fast.fonts.net');
    data = data.replace(/import url\(/, 'import url(//fast.fonts.net');
    data = data.replace(/font-family:"Geom Slab 703 W01 Light";/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family:"GeomSlab703W01-LightIta";/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family:"GeomSlab703W01-Medium";/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family:"GeomSlab703W01-MediumIt";/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family:"Geom Slab 703 W01 Bold";/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family:"GeomSlab703W01-BoldItal";/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    var s = $('<style type="text/css" />').appendTo('head');
    s.html(data);
});
</script>

ok, so i don't need more than this quick hack for my current project, but if anyone codes a cleaned-up / optimized version i'd be happy to hear about it.

css - Is there any way to fix fonts.com @font-face declarations? - Sta...

css html5 font-face webfonts
Rectangle 27 0

wherever you show your content on the site in HTML way use HTML Tag like <strong></strong> for Bold and <i></i> for Italic, if its not possible in css

This is extremely bad form, as presentation should not be mixed with content. CSS should be used for styling

@JohmDon what would you do if its not support in all browser?

I suppose you would just have to deal with it.

see that's not the ans of my question!

CSS Cross browser Font support - bold and italics not working - Stack ...

css
Rectangle 27 0

bolder

The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent

bolder and lighterare even part of the official spec. How they are interpreted and displayed is up to the browser.

The fact that they appear the same visually is because most browsers don't properly support font weight variations beyond bold and normal.

CSS: what is difference between font-weight: bolder and font-weight: b...

css fonts bold weight
Rectangle 27 0

Now that web fonts are supported in Firefox 3.5 and 3.6, Internet Explorer, Safari, Opera 10.5, and Chrome, web authors face new questions: How do these implementations differ? What CSS techniques will accommodate all? Firefox developer John Daggett recently posted a little roundup about these issues and the workarounds that are being explored. In response to that post, and in response to, particularly, Paul Irishs work, I came up with the following @font-face CSS syntax. Its been tested in all of the above named browsers including IE 8, 7, and 6. So far, so good. The following is a test page that declares the free Droid font as a complete font-family with Regular, Italic, Bold, and Bold Italic. View source for details. Alert: Be aware that Readable Web has released its first @font-face related software utility for creating natively compressed EOT files quickly and easily. It has its own web site and, in addition to the utility itself, the download package contains helpful documentation, a test font, and an EOT test page. Its called EOTFAST If youre working with @font-face, its a must-have.

@font-face{ /* for IE */
    font-family:FishyFont;
    src:url(fishy.eot);
}
@font-face { /* for non-IE */
    font-family:FishyFont;
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype");
}

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.

html - CSS @font-face not working in ie - Stack Overflow

html css xhtml html5 css3
Rectangle 27 0

window.find(), where supported, moves the selection to the text it has found. This being the case, you can use document.queryCommandState() to check the boldness of the selected content, which has the advantage of working regardless of how the boldness is set (CSS font-weight, <b> or <strong> elements). Unfortunately in non-IE browsers you have to temporarily put the document into design mode to make this work:

document.designMode = "on";
window.find("I am");
var isAllBold = document.queryCommandState("Bold");
alert(isAllBold);
document.designMode = "off";

I am able to detect all the other formattings like Italics, Subscripts,Superscripts etec.. But I am unable to identify striked text. That is <s> tag. Could you please help me on this.

@So I: It's strikeThrough: jsfiddle.net/efN8P/1.

javascript - How to check whether a text is having bold in a web page ...

javascript dom-selection
Rectangle 27 0

you can use font-weghit:100 or lighter this is working with ie opera 16 and older operas, but i dont know why h1s in firefox are bolder sorry

css - how to remove the bold from a headline? - Stack Overflow

css xhtml
Rectangle 27 0

I'm using FF 10, and the row headers on the left (Web Space, Bandwidth, etc) are displaying as bold. The font isn't as large as the as on the column headers, but it is definitely bold.

html - CSS table TH elements not bold in Firefox (but OK in IE) - Stac...

html css html-table
Rectangle 27 0

No need to mess around with settings just remove the quotes and spaces from the font-family:

body {font-family: "DroidSerif Regular", serif; }
body {font-family: DroidSerifRegular, serif; }

CSS @font-face not working with Firefox, but working with Chrome and I...

css firefox font-face file-uri
Rectangle 27 0

This is a problem with how you setup your font-face's paths. Since you didn't start the path with a "/", Firefox will attempt to find the font's based on the path the stylesheet's in. So basically, Firefox is looking for your font in the "root/css/font" directory instead of the "root/font" directory. You can easily fix this by either moving the font folder to the css folder, or adding a / to the beginning of your font paths.

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

CSS @font-face not working with Firefox, but working with Chrome and I...

css firefox font-face file-uri
Rectangle 27 0

@font-face {
    font-family: "MyriadProBold";
    src: url('fonts/myriadpro_bold.otf');
    font-weight: normal;
}
h3 {
    font-family: MyriadProBold, Arial, Sans-Serif;
    font-weight: bold;
}

Not sure if it works but give it a try.

css - Show text in bold if @font-face is not working - Stack Overflow

css font-face
Rectangle 27 0

I've tested this in IE 8 and IE 9. Seems to work ok.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://jquery-countdown.googlecode.com/svn/trunk/js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
    .desc { margin: 7px 3px;
        width: 352px;
    }
  .desc div {
  float: left;
  font-family: Arial;
  width: 70px;
  margin-right: 65px;
  font-size: 13px;
  font-weight: bold;
  color: #000;
  }
    #counter
    {
        width: 353px;
    }
</style>

<div id="counter"></div><div class="desc"><div>Minutes</div><div>Seconds</div></div>
<script type="text/javascript">

     $('#counter').countdown({
             image: 'http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png',
             startTime: '25:30'});            

</script>

Make sure you have the doc type defined at the top of your html page as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

jquery - Timer control is not working in Internet Explorer - Stack Ove...

jquery
Rectangle 27 0

No need to mess around with settings just remove the quotes and spaces from the font-family:

body {font-family: "DroidSerif Regular", serif; }
body {font-family: DroidSerifRegular, serif; }

CSS @font-face not working with Firefox, but working with Chrome and I...

css firefox font-face file-uri
Rectangle 27 0

Except some of the font types I have downloaded do not have a bold file, it is all included in one, for example that bebas font I am using. If I install it, bold and italics works fine, but if I uninstall it and then use the CSS technique to get it working, the bold does not work which is annoying

Then just use the same font file

Tried that too, no luck unfortunately

Seems this is the way to do it, will just have to download font files which contain bold.tff regular.tff and italics.ttf

CSS Cross browser Font support - bold and italics not working - Stack ...

css
Rectangle 27 0

IE doesn't support using a different font-weight than was specified in a @font-face rule.

Thank you, somehow I didn't find the link you posted while I was searching.

css - font-weight: bold with @font-face not working in IE9 - Stack Ove...

css internet-explorer font-face
Rectangle 27 0

OMG, that did it....I can't believe I missed that...thanks!!!

CSS font-weight "bold" isn't working, even with "!important"! - Stack ...

css fonts bold weight
Rectangle 27 0

Your fallback font do not match on weight with your custom font. However, there are bold variation of arial. You can try h3 { font-family:custom, 'Arial Bold', sans-serif; }

Haha great idea, should've thought of that myself... thanks!

It's also great that someone found my idea working. You are welcome

css - Show text in bold if @font-face is not working - Stack Overflow

css font-face
Rectangle 27 0

This is a problem with how you setup your font-face's paths. Since you didn't start the path with a "/", Firefox will attempt to find the font's based on the path the stylesheet's in. So basically, Firefox is looking for your font in the "root/css/font" directory instead of the "root/font" directory. You can easily fix this by either moving the font folder to the css folder, or adding a / to the beginning of your font paths.

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

CSS @font-face not working with Firefox, but working with Chrome and I...

css firefox font-face file-uri
Rectangle 27 0

Of course font-weight is supported in Opera. But if you only include your regular font and not the bold version too, you are not guaranteed to have crossbrowser ( and more important cross-OS! ) results.

Also - are you sure, you mean Trad Gothic and not Trade Gothic - fonts with whitespaces also should always be quoted: "Trad(e) Gothic".

On Windows 7 at least, Opera 12.02, as well as other browsers, applies algorithmic bolding when bold is requested for and the font specified is not available as bold. This could be construed as a bug, but it is common browser behavior.

@jukka this is what i mean with inconsistent results - the calculated bolding might differ between browsers and OS and in comparison between browsers lead to "hey, this one didn't do it right"-effects.

@Christoph, the problem description says that bold is not supported in opera (as per the heading) or browsers in general (as per message text). This suggests that no bolding is applied. This is possible if the font is declared as bold in @font-face but isnt bold

css - font weight bold not support in opera (my opera version is 12.02...

css css3 opera font-face
Rectangle 27 0

jQuery.fn.fadeIn = function(speed, callback) { 
return this.animate({opacity: 'show'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeOut = function(speed, callback) { 
return this.animate({opacity: 'hide'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeTo = function(speed,to,callback) { 
return this.animate({opacity: to}, speed, function() { 
    if (to == 1 && jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};

css - jQuery FadeTo causing pixelated text in IE8 when font-weight: bo...

jquery css fadeto
Rectangle 27 0

Using <!DOCTYPE html> fixed this issue for me in IE8. The text still looks blocky during the fade but afterwards it smoothes out

css - jQuery FadeTo causing pixelated text in IE8 when font-weight: bo...

jquery css fadeto