Changing Your Members Portal Font
  • 25 Aug 2022
  • 2 Minutes to read
  • Dark
    Light

Changing Your Members Portal Font

  • Dark
    Light

Article summary

You can change your Members Portal font in three simple steps and use any licensed or open-source font you'd like.

Planning on using the same font across all locations in your Network?

Template files are individual to each of your locations which means you must repeat the process in each location within your Network.

This tutorial guides you through the steps to use a single custom font for all pages of your Members Portal.

If you'd like to use multiple fonts on different pages, consider hiring developers.

Step 1. Downloading Your Font File

The first step of the process is downloading your font file. You can use any font file from any website as long as it is in one of the following formats:

  • OTF
  • TTF
  • EOT
  • WOFF
  • WOFF2
Always make sure you have a font license if you use a font that isn't open-source.

If you're using Google Font, you can simply click Download family on the page of the font you want to use.

CustomFont_GFontDownload.png

From there, all you need to do is extract the zip file you've just downloaded to be able to upload your font file during Step 2.

CustomFont_GFontExample.png

Step 2. Uploading Your Font File to Nexudus

The second step of the process is uploading your font file via the Template File Editor on the Admin Panel.

  1. Log in to dashboard.nexudus.com if you aren't already.

  2. Click Data files.

  3. Click Add file.

  4. Click Select file and select your font file on your device.

  5. Click the Save Changes button.

  6. Copy the full address in the URL field and save it somewhere.

CustomFontFileURL.png

You will need this URL during Step 3.

  1. Click on the cross icon in the bottom left corner to close the record.

You're ready to move to Step 3.

Step 3. Adding Your Font the CSS File in Nexudus

Now that you have your font file and its URL, it's time to add this font to your Members Portal style.css file.

  1. Click Common files > style.css.

  2. Copy and paste the following code snippet at the end of the file.

@font-face {
font-family: "CUSTOM_FONT_NAME";
src: url("CUSTOM_FONT_URL");
}
div {
font-family: 'CUSTOM_FONT_NAME';
}

CustomFontSnippet.png

  1. Replace both CUSTOM_FONT_NAME with your font's name,

Make sure you don't remove the brackets.

CustomFontSnippet_FontName.png

  1. Replace CUSTOM_FONT_URL with the font file URL you saved in the previous step.

Make sure you don't remove the brackets.

CustomFontSnippet_FontURL.png

  1. Click the Save button. 


All set! You can make sure your font change was successful by clicking on the Launch Site button at the bottom of the page.


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
ESC

Eddy AI, facilitating knowledge discovery through conversational intelligence