How to use custom webfonts with Invision Community 4 and 5

Obito Uchiha · 2月22日

Invision Community currently comes with a choice of seven webfonts in the default theme. If you want to use different fonts, you have to customize your theme. This article explains, how this is done.

Using a custom webfont requires three steps:

Turning off the webfonts that the IPS theme is using
Linking a new custom font
Activating the new custom font for your entire website or parts of it

A) Linking fonts from a webfont service like Google Fonts

First, turn off the webfonts currently used by switching the “Body Font” and Headline Font” to “Default” in the theme’s text settings.

Now choose a font family you want to use from Google Fonts (or any other webfont service).

You should always use a complete family consisting of at least four styles: regular, italic, bold and bold italic. This is important because all those styles will be called on your website and you want to have a proper font available when that happens. Otherwise the browsers will generate the fonts artificially, which will look bad and will not be very legible.

You are however free to choose which font weights you define as the “regular” and “bold” weight if there are more than two choices available.

First, pick a font family you would like to use from Google Fonts. Then click the plus symbol next to the styles you want to use.

Once the family is complete, copy the <link> code that appears in the sidebar.

Option 1: Linking the font from the globalTemplate

Now open your ACP and go to your theme settings. Next to your default theme, click “Edit HTML and CSS” and open the “globalTemplate”.

Update for Invision Community 5

Check out this article to learn how to add something to the HTML header in Invision Community 5.

Paste the <link> code at the end of the <head> section before the closing </head>

This process will be similar for all webfont services. As an example, this is the <link> code you get for Adobe Fonts and you would paste it in the same place in your “globalTemplate”.

Option 2: Linking the font from the custom.css

Keep in mind that editing your “globalTemplate” has its downsides. There will likely be future updates to this template and once you have changed it, you will have to deal with future updates of the template manually. So, as an alternative you can also link your Google Fonts from the “custom.css”, which is designed to be edited by you. So, instead of copying the <link> code from Google, you can also copy the <@import> code (without the <style> and </style>) and paste it at the beginning of your “custom.css”. The downside of this method is that the fonts are loaded slower this way, because the download of the fonts and their CSS can only start once the browser has downloaded your “custom.css”. So, you have to decide whether you want to prioritize speed or convenience.

Now that your webfonts are called with either the <link> or the <@import> method, you only need to assign them to your entire website or parts of it. Google gives you an example of the necessary “font-family” declaration. If you want to apply the webfont family to your entire website, all you have to do is apply it to the “body” element of your website in the “custom.css”.

That’s it! Your website should now use the webfont from Google’s webfont service. If you want to add more variations, you could also load additional fonts and assign them to dedicated areas, for example certain headlines. But keep in mind: with every font you add you slow down the loading of your pages a little bit.

Example where another font is used just for main headlines

B) Delivering the webfonts from your web server

Loading the webfonts directly from the webfont service is certainly the most convenient way. But you might also want to deliver all resources directly from your website, for example for privacy reasons. In Germany, website owners can even be sued for using webfonts in a way that unnecessarily contacts Google servers. In this section we discuss how you can deliver your webfonts from your own web server.

Before using this method, make sure you have a license to upload the fonts to your server. This use is certainly allowed for Google Fonts and other fonts using liberal licenses like the Open Font License (OFL). But for commercial fonts, you usually need to purchase a dedicated webfont licence. Keep in mind: just because you can find a font for free on the internet doesn’t mean that it is actually free to use.

The Google Font service allows you to download the fonts you selected. Unfortunately, the download contains the source fonts, not the optimized webfont versions you need for self-hosting. You should never upload the original TTF fonts to your website, because their file size will be way too large. A TTF font might have 300 KB while as a webfont in the WOFF format it might have just 30 KB.

So, make sure you have a proper package of webfonts in the WOFF format. For commercial fonts, this is usually delivered after the purchase of a webfont license. For free fonts, you can also create webfont packages with the Fontsquirrel Wefont Generator. But for Google fonts, I suggest to rely on a separate service like the Google Webfonts Helper:

https://gwfh.mranftl.com/fonts

Let’s go through an example and choose the Vollkorn type family this time.

Let’s pick four styles again (regular, italic, bold and bold italic). You can also pick the language system support you need. This is useful, because if your website is English-only, you don’t need to deliver Greek and Cyrillic characters.

You can also choose which font formats will be created. “Best support” sounds reasonable, but it also creates really outdated font format options. I recommend the choice “Modern Browsers” and in fact, you could reduce it even more. Usually there is only a small file size improvement between WOFF and WOFF2. As a result, it is usually enough to just deliver the WOFF files.

The following step depends on whether you are a self-hosted IPS client or not. If you are self-hosted, you can just upload the fonts to your web server via FTP. If you a cloud customer, you need to use a work-around.

Option 1: Upload fonts via FTP

Download the font package and upload it to a new folder (for example labelled “webfonts”) to your server. Make sure you know the public path to this folder. Now copy the font-face declaration you got from Google Webfonts Helper or your webfont provider. Paste it into your custom.css and adjust the URLs to the font files. Below is only one style to show the principle.

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: url('/xtra/webfonts/vollkorn-v21-latin-ext_latin-regular.woff') format('woff'); 
}

As before, we need to apply our new family to our website.

body {
font-family: 'Vollkorn', serif;
}

Option 2: Upload fonts as a theme resource

If you cannot use FTP you can also upload the webfonts as a theme resource. In this case, it it especially useful to limit the font format option and only use WOFF. We use the Google font “Work Sans” this time.

Start with your main theme and access the Theme Resources as shown below.

Now click the button “Add resource”. Leave all the settings as they are. You want to create a global System resource. Select your WOFF file using the “Resource” button or drag the font file on this button. Click the “Save” button. Find your file in the list of theme resources. Copy the template tag that was assigned to the font file.

Now use the template tag as URL for your “font-face” declaration in your “custom.css”.

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('{resource="work-sans-v18-latin-regular.woff" app="core" location="global"}') format('woff'); 
}

Repeat this step for all font styles you want to use in this theme. For your main font family, you should have these four fonts available:

regular (font-style: normal, font-weight 400)
italic (font-style italic, font-weight 400)
bold (font-style normal, font-weight 700)
bold italic (font-style: italic, font-weight 700)

Always assign these values if you use four styles. It doesn’t really matter if the values match the numbers from the webfont provider. You could prefer a light style but declare it the “regular” by defining it as “font-weight: 400" or you define the extra-black as “bold” by setting it as “font-weight: 700”. Of course every style needs to be distinct. If you assign a combination of font-style and font-weight twice, the first declaration will be overwritten.

If you have multiple themes, you can go through all your themes and assign different families or the same font family. Just make sure you use the template tags from the current theme.

登录

How to use custom webfonts with Invision Community 4 and 5

推荐的帖子

Obito Uchiha