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!

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