Skip to content
Free Articles:

How to use custom webfonts with Invision Community 4 and 5

opentype
By opentype
· 5,052 views · 4 comments

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. 


Access to this article is limited to members. Please register to continue reading.

Register for free!

User Feedback

Recommended Comments

Claudia

Claudia

Premium Members

Thanks for this explanation. Now I have my favourite font family – but on mobile the font size is still small. Do you have how I can change this in custom.css?

opentype

@Claudia In general: I would suggest to adjust the “Font Scale” settings in the Theme settings. This would be global, but if your new/custom font looks smaller, than it will be smaller everywhere. 

There is no easy way to just increase the size on mobile. You would of course need to use a media query, but you would also have to specifically target certain CSS classes and there are so many of them. 

Claudia

Claudia

Premium Members

Thanks. Even I choose standard font size with "Font Scale", no matter what I do, on mobile the font size is 13px. I'll have to look for a solution at IPS.

opentype
1 hour ago, Claudia said:

Thanks. Even I choose standard font size with "Font Scale", no matter what I do, on mobile the font size is 13px. I'll have to look for a solution at IPS.

I had a look at your site. The forum text on mobile should come from this declaration, which you should be able to override in the custom.css

@media screen and (max-width: 767px)
.ipsType_normal {
font-size: 13px;
}
}

 

Create an account or sign in to comment

Important Information

We are using functional cookies

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.