Typography (Fonts)

All things fonts in our styles!

Introduction to the font properties​

When using our styles, you'll find we've included a variety of font properties out of the box. You can easily change the font on your community by going to: Style properties -> Typography.
  • Font families - Define the overall font families for your community
  • Font size - Adjust the font size used across the community
  • Font weight - This can typically be left alone as it's a bit more advanced. If you want to include additional font-weights in your custom fonts you can define them here. Light/Normal/Medium/Heavy. By default Light/Normal/Medium are all set to 400 to help with page load.
  • Font Awesome weight - This can dramatically change the look of all the icons around the site
  • Font spacing - Adjust the vertical spacing between the lines of text
  • Custom "font targets" - This unique feature lets you define specific font CSS for specific classes defined on this page. For example, if you want to make it so all block-headers, buttons, navigation want to use UPPERCASE + BOLD, you could easily define that here. Some of our styles use this approach


Select a pre-defined font​

You can easily change the font on your community by selecting an option out of the "Custom Font" dropdown inside of Style properties -> Typography:
1669930545627.png


This option will change the overall user interface font. This option does not change the message fonts. Because XenForo provides an array of editing options, typically custom fonts will not cover all of them. Messages by default use the standard XenForo font which is associated with System Fonts defined in "Body Text Font".

To help page load speed, each of the Google fonts we define only includes font-weights 400 (regular) and 700 (bold). To add additional fonts or font-weights, you'll need to add your own (see below).


Use your own Google Font
You can find a wide variety of font families to use in your community on Google Fonts. For this example, let's add "Comic Neue" to the community.
1.) Go to the Comic Neue link above and "Select" the Regular 400 and the Bold 700. After that is done, select the "copy" symbol on the right where it says "To embed a font, copy the code into your <head> of your html"
chrome_lIhYgjAap4.gif


The code you copied should look something like this:
Code: 
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">

This code will go inside the "Embed Font" option.

2.) Add the font-family name to the "User Interface Font like so:
Code: 
'Comic Neue', 'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif

The final result will look like this:

1669932781603.png

Hit save and enjoy your new font family!

REM Support​

By default, XenForo uses px units for font sizes. Our styles include an optional REM Support setting that lets you switch to rem-based font sizing, which scales proportionally and can improve accessibility when users change their browser's default font size.
You'll find this option under Style Properties → Typography → Size → REM Support.
Important: You cannot simply enable REM Support without also updating your font size values. Leaving px values in place after enabling the option will break your font sizing. Both steps below are required.
Click to expand...

Step 1: Enable REM Support​

Check the REM Support checkbox in Style Properties → Typography → Size.

Step 2: Update your font size values​

Our framework sets the HTML base font size to 62.5%, which makes 1rem = 10px. This means font sizes map cleanly to pixel values, for example, 1.5rem = 15px, 1.3rem = 13px, and so on.
Replace your font size property values with the following:
PropertyStyle PropertyValue
Normal font sizefontSizeNormal1.5rem
Small font sizefontSizeSmall1.3rem
Smaller font sizefontSizeSmaller1.3rem
Smallest font sizefontSizeSmallest1.2rem
Large font sizefontSizeLarge1.6rem
Larger font sizefontSizeLarger1.8rem
Largest font sizefontSizeLargest2.2rem


Note: Any additional custom font sizes you've set elsewhere in your style should also be converted using the same formula: divide the pixel value by 10 to get the rem equivalent. For example, 14px → 1.4rem.
Click to expand...


REM Support & Responsive Typography​

One advantage of using rem units is how cleanly they pair with responsive breakpoints. Since all font sizes are relative to the html base (set to 62.5%), you can scale the entire site's typography down at each breakpoint by simply reducing that base percentage with no need to override individual font size properties.


Add the following to your Extra.less or custom LESS file:
Code: 
@media (max-width: @xf-responsiveWide) {
    html {
        font-size: 58%;
    }
}

@media (max-width: @xf-responsiveMedium) {
    html {
        font-size: 55%;
    }
}

@media (max-width: @xf-responsiveNarrow) {
    html {
        font-size: 52%;
    }
}

This gradually reduces the base font size at each breakpoint, which proportionally scales down every element using rem units, headings, body text, UI labels all at once.

Note: The percentages above are a starting point. Adjust them to taste depending on how aggressively you want to scale down at smaller viewports. You only need to override the breakpoints relevant to your design.
Click to expand...



Few key points:​

  • Avoid using too many fonts. More fonts can not only decrease the overall legibility of the community but could also have an impact on performance
Back