I'm probably doing this all wrong, but to my surprise I was able to change the font in a message using the following code:
[html]
<body>
<style type="text/css" media="screen, print">
@font-face {font-family: Antonio-Regular; src: url("../Themes/default/fonts/Antonio-Regular.ttf");}
div {font-family: Antonio-Regular;}
div {font-size: 16px;}
</style>
WOOO! A different font!
</body>
[/html]
The font is loaded in ../Themes/default/fonts.
Unfortunately this not only changes the font within the message but also in several other places on the page. Does anyone know of a way to restrict the change in font to the current message?
There may well be problems with my CSS3 code, but this is a start. Suggestions and modifications are invited.
there are several problems with that code....
the first of which is - you should not be using the body tag... that is already opened on the page.
second - you should use INLINE styles to define a font in the middle of a page like that....
third - you defined the css for a div... for ALL divs. You should be using a class or an id
You need to target .inner class. If you want to change only and only post's font.
/* Custom Font Loading */
@font-face {
font-family: Antonio;
src: url(../fonts/Antonio/Antonio-Light.ttf);
}
.inner {
font-family: Antonio;
}