How to Use Custom Fonts

One of the most important qualities of a well-designed portal is the font choice. With only a few lines of CSS, you can add your own custom font using @import or @font-face. This guide will show how to use both.

In order to add custom CSS, log into your portal as an admin, go to Theme Editor, and then select Custom CSS.

Using @import

This is the best approach for using Google Fonts. All you need to do is use a CSS At-Rule linking to a css file, such as
@import url('https://fonts.googleapis.com/css?family=Inconsolata');

Once you've imported the font, you can then assign it to any element you'd like using it in your font-family and including an !important. So if you'd like to apply the font to your body content, add the following CSS:

body {

/* Note: ‘inherit’ will use the default font in case Inconsolata does not load */

font-family: 'Inconsolata', inherit !important;

}

Using @font-face

This is the best option to use if you are hosting your own fonts. Please bear in mind that if you host your own fonts, you'll need to allow CORS to access your portal. because of the nature of this tag, there is a bit more CSS needed to ensure it works properly:

@font-face {

src: url('https://yoursite.com/fonts/Inconsolata.woff') format('woff'),
url('https://yoursite.com/fonts/Inconsolata.ttf') format('truetype');
font-family: 'Inconsolata';
font-weight: 600;

}

Now, add the font as you normally would, making sure to use !important. For example, if you'd like to add that newly added Inconsolata font in your h1 tag, add the following CSS

h1 {

font-family: 'Inconsolata', inherit !important;
}