• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 How to force change all font family without editing each style properties?

RoldanLT

Well-known member
#1
Now I want to use this font family all over my forum:
Code:
Roboto,Helvetica,Arial,sans-serif
Code:
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
And this are the style properties I already modified:
  • Appearance > Styles > Your Style > Style Properties > General > Body > Font Family
  • Appearance > Styles > Your Style > Style Properties > Message Elements > Message Text > Font Family
  • Appearance > Styles > Your Style > Style Properties > Buttons > Button > Font Family
  • Appearance > Styles > Your Style > Style Properties > Forms > Text Control > Font Family
  • Appearance > Styles > Your Style > Style Properties > [rellect] AdBlock Detector > Font Family
  • Appearance > Styles > Your Style > Style Properties > [rellect] AdBlock Detector > Font Family
Is there an easy/quick way of forcing them all to use my desired font?
Without modifying each style properties.

Thanks.
 

Arty

Well-known member
#7
That property's name is messageText, therefore in template files look for
Code:
xen:property messageText
That one is tricky because it is present in several templates. For example, in editor_ui.css
Code:
  .redactor_box .placeholder span
   {
     line-height: 14px;

     {xen:property messageText}
in events.css
Code:
    .event .content .snippet
     {
       margin: 5px 0;
      
       {xen:property messageText};
and 4 other templates. Find all selectors where it is used and use them instead of *
Code:
.redactor_box .placeholder span,
.event .content .snippet
{
    font-family: Roboto,Helvetica,Arial,sans-serif;
}
 

Dadparvar

Well-known member
#8
sometimes when you use FontAwesome, then the code that Brogan gave will break the icons.
But this code (instead of Brogan's) will help you in that situations.
Code:
*:after{
    font-family: Arial !important;
}
just a ":after" after *.
(not sure. just tested sometimes and worked. maybe its not a rule ;))
 

Arty

Well-known member
#9
I think you meant
Code:
font-family: FontAwesome !important;
However that is a bad solution. There are legitimate places where pseudo selector could be used to display some text, that code will force FontAwesome on it, messing up text.

"*" selector should be avoided, it has potential to mess up many things. Combined with !important its a recipe for disaster.