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

[rdn]

Now I want to use this font family all over my forum:

Roboto,Helvetica,Arial,sans-serif

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

 

[Paul B]

Try something like this in EXTRA.css:

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

 

[rdn]

Brilliant
Thanks Brogan

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

 

[rdn]

Try something like this in EXTRA.css:

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

I think it overwrites FontAwesome also

 

[Arty]

Instead of * use list of selectors where those style properties are used.

 

[rdn]

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]

That property's name is messageText, therefore in template files look for

xen:property messageText

That one is tricky because it is present in several templates. For example, in editor_ui.css

  .redactor_box .placeholder span
   {
     line-height: 14px;

     {xen:property messageText}

in events.css

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

.redactor_box .placeholder span,
.event .content .snippet
{
    font-family: Roboto,Helvetica,Arial,sans-serif;
}

 

[Dadparvar]

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.

*:after{
    font-family: Arial !important;
}

just a ":after" after *.
(not sure. just tested sometimes and worked. maybe its not a rule )

 

[Arty]

I think you meant

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.