Change Message Font with CSS3

chris319 · April 15, 2016, 04:23:10 AM

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:

Code Select

[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.

Kindred · April 15, 2016, 06:31:40 AM

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

Antes · April 15, 2016, 02:48:11 PM

You need to target .inner class. If you want to change only and only post's font.

Code Select

/* Custom Font Loading */
@font-face {
   font-family: Antonio;
   src: url(../fonts/Antonio/Antonio-Light.ttf);
}
.inner {
   font-family: Antonio;
}

News:

Change Message Font with CSS3

chris319

Kindred

Antes