Does TInyMCE automatically grab BOLD or ITALIC versions of @font-face fonts?
Permalink 1 user found helpful
I don't know how this works. We are buying FF Din Web Basic (4 fonts) and so I will be putting the @font-face declarations in the CSS, but I'm not sure how TinyMCE grabs a bold font. Is there some special way I have to program the bold and italic versions into my CSS file?
You need to link the styles like this (using 4 fonts of FF Din Web Basic Family as an example; regular, italic, bold and bold-italic):
1.
/* first for IE 4–8 */
@font-face {
font-family: DINWeb;
src: url("DINWeb.eot");
}
@font-face {
font-family: DINWeb-Ita;
src: url("DINWeb-Ita.eot");
font-style: italic;
}
@font-face {
font-family: DINWeb-Bold;
src: url("DINWeb-Bold.eot");
font-weight: bold;
}
@font-face {
font-family: DINWeb-BoldIta;
src: url("DINWeb-BoldIta.eot");
font-weight: bold;
font-style: italic;
}
/* then for WOFF-capable browsers */
@font-face {
font-family: DINWeb;
src: url("DINWeb.woff") format("woff");
}
@font-face {
font-family: DINWeb-Ita;
src: url("DINWeb-Ita.woff") format("woff");
font-style: italic;
}
@font-face {
font-family: DINWeb-Bold;
src: url("DINWeb-Bold.woff") format("woff");
font-weight: bold;
}
@font-face {
font-family: DINWeb-BoldIta;
src: url("DINWeb-BoldIta.woff") format("woff");
font-weight: bold;
font-style: italic;
}
body { font-family: DINWeb, sans-serif;}
strong { font-family: DINWeb-Bold; }
em { font-family: DINWeb-Ita; }
strong em,
em strong {font-family: DINWeb-BoldIta; }
2.
And you need to add that to your typography.css file in the root directory of your theme, too, if you want the styles to show up in your TinyMCE editor.
3.
And link the styles in your templates like this:
<link href="<?php echo $this->getThemePath()?>/typography.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('styles.css'); ?>" />
(typography.css gets linked differently and gets linked first)