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

rdn

Well-known member
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.
 

Brogan

XenForo moderator
Staff member
Try something like this in EXTRA.css:

Code:
*
{
    font-family: Arial, sans-serif !important;
}
 
Reactions: rdn

rdn

Well-known member
Brilliant (y)
Thanks Brogan :)

/* force font */
* { font-family: Roboto,Helvetica,Arial,sans-serif !important; }
 

Arty

Well-known member
Instead of * use list of selectors where those style properties are used.
 

rdn

Well-known member
Instead of * use list of selectors where those style properties are used.
How? Like I want to target this Properties:
  • Appearance > Styles > Your Style > Style Properties > Message Elements > Message Text > Font Family
 

Arty

Well-known member
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;
}
 
Reactions: rdn

Dadparvar

Well-known member
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
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.
 
Top