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

Discussion in 'Styling and Customization Questions' started by RoldanLT, Oct 1, 2014.

  1. RoldanLT

    RoldanLT 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:
    Is there an easy/quick way of forcing them all to use my desired font?
    Without modifying each style properties.

    Thanks.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Try something like this in EXTRA.css:

    Code:
    *
    {
        font-family: Arial, sans-serif !important;
    }
    
     
    RoldanLT likes this.
  3. RoldanLT

    RoldanLT Well-Known Member

    Brilliant (y)
    Thanks Brogan :)

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

    RoldanLT Well-Known Member

    I think it overwrites FontAwesome also :(
     
  5. Arty

    Arty Well-Known Member

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

    RoldanLT Well-Known Member

    How? Like I want to target this Properties:
    • Appearance > Styles > Your Style > Style Properties > Message Elements > Message Text > Font Family
     
  7. Arty

    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;
    }
     
    RoldanLT likes this.
  8. Dadparvar

    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 ;))
     
  9. Arty

    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.
     
    Dadparvar likes this.

Share This Page