Advertisement:

Author Topic: Change Message Font with CSS3  (Read 1642 times)

Offline chris319

  • Semi-Newbie
  • *
  • Posts: 31
Change Message Font with CSS3
« on: 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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 58,266
  • Gender: Male
    • Kindred-999 on GitHub
Re: Change Message Font with CSS3
« Reply #1 on: 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
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,920
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: Change Message Font with CSS3
« Reply #2 on: 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;
}
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]