Tag Archives: css

Custom Web Fonts: IE8 and Different Font Weights

4 Replies

If you’ll remember a few posts back, I described how to import custom fonts for different weights. It turns out that this works for most browsers except IE8 (and probably 7, and 6, and so on). The original css to do the import was:

[sourcecode language="css"]

@font-face{
font-family: ‘MyFont’;
src: url(‘fonts/MyFontFile.eot’);
src: url(‘fonts/MyFontFile.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/MyFontFile.woff’) format(‘woff’),
url(‘fonts/MyFontFile.svg#webfont’) format(‘svg’);
}

@font-face{
font-family: ‘MyFont’;
src: url(‘fonts/MyFontFileItalics.eot’);
src: url(‘fonts/MyFontFileItalics.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/MyFontFileItalics.woff’) format(‘woff’),
url(‘fonts/MyFontFileItalics.svg#webfont’) format(‘svg’);
font-style: italic;
}

@font-face{
font-family: ‘MyFont’;
src: url(‘fonts/MyFontFileBold.eot’);
src: url(‘fonts/MyFontFileBold.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/MyFontFileBold.woff’) format(‘woff’),
url(‘fonts/MyFontFileBold.svg#webfont’) format(‘svg’);
font-weight: bold;
}

[/sourcecode]

What IE8 doesn’t like, though, is overloading the font-family: it only seems to register the first font-face for a font-family name it’s given, and doesnt seem to like font-weight inside font-face either. So when you use the code above in IE8, instead of using the proper bold font-face, it does a “faux-bold”, which is sometimes acceptable, but normally horrendous. The only real way to fix this (and is what font-squirrel does) is to use separate font-family names and use font-family instead of font-weight in your IE-specific stylesheet:

[sourcecode language="css"]

@font-face{
font-family: ‘MyFont’;
src: url(‘fonts/MyFontFile.eot’);
src: url(‘fonts/MyFontFile.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/MyFontFile.woff’) format(‘woff’),
url(‘fonts/MyFontFile.svg#webfont’) format(‘svg’);
}

@font-face{
font-family: ‘MyFontBold’;
src: url(‘fonts/MyFontFileBold.eot’);
src: url(‘fonts/MyFontFileBold.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/MyFontFileBold.woff’) format(‘woff’),
url(‘fonts/MyFontFileBold.svg#webfont’) format(‘svg’);
}

h1{
font-family: MyFontBold;
}
[/sourcecode]

It’s hacky, I know, but it works – let me know if you’ve got other techniques to solve this issue :)

Custom Sharepoint 2010 Ribbon Markup Styles

3 Replies

If you’re doing any sort of custom theming for Sharepoint 2010, and have been wondering how to modify the out-of-the-box styles provided by the “Markup Styles” button in the ribbon, take a look at this really useful blog post I came across today:

http://mosshowto.blogspot.com/2009/12/sharepoint-2010-wiki-styles.html

If you Firebug / View Source HTML’d the content, you would probably have worked out how it kind of worked – basically, you just need to overwrite a few css classes to replace the existing ones and add new css classes in the following format:

[sourcecode language="css"]

H1.ms-rteElement-H1B
{
-ms-name:"Colored Heading 1";
/* [ReplaceColor(themeColor:"Accent1")] */ color:#0072bc;
font-size:2em;
font-weight:normal;
}

[/sourcecode]

Note the proprietary -ms-name property, and the use of the ReplaceColor goodness to integrate SP2010 themes into the stylesheet.

Unfortunately though, it looks like the only way to get rid of the out-of-the-box options is to remove the v4.css import (<SharePoint:CssLink runat=”server” Version=”4″ >) from the master page, and make a custom copy that excludes the styles.

EDIT: As pointed out in the comments below, an alternative to replacing the v4.css if you’re only interested in modifying one or two of your Publishing HTML controls, you can specify the PrefixStyleSheet property which will replace the default set with the css style sheet you specify.