myRealPage also offers Website Customization and Font Change services! Click here for more information.



This article is comprised of two parts:


• PART 1 •

1 - On Google Fonts:

  • Go to Google Fonts to look for a font to use.
  • A. You can use the search bar to find a specific font by name, if you already have one in mind.
  • B. Use these filters to find a font
  • C. Click on the paint bucket icon to change the background color and check how certain fonts would work with light, dark, or high contrast backgrounds.
  • D. You can type sample text in this space to test the font you like. Play around with the other options here to get a good feel for the font you're checking.
  • E. Click here to apply your custom sample text to all other fonts, to see how it looks.
  • F. Click here to see the full character set for the font, as well as other details about it.
  • G. If you're satisfied with the font and want to use it for your website, click on the plus symbol. You can add as many fonts as you need.


2 - After Selecting Fonts:

  • A. After you have made your selection, click on the black bar at the bottom of the screen to expand it.



3 - Selecting font weights:

  • A. This shows the fonts you have selected. You can click on the minus sign beside each one if you change your mind and decide not to use a selected font.
  • B. Make sure you are on the Customize tab.
  • C. This indicates how fast your selected combination of fonts will load on your website. The faster the better!
  • D. Select which versions/weights of the fonts you will be needing.



4 - Getting the embed codes:

  • A. Click on the Embed tab.
  • B. Choose which method you will use to embed the fonts into your website. In this example, we will use Standard.
  • C. Take note of and/or copy the block of generated HTML code.
  • D. Take note of and/or copy the block of generated CSS code.



Back to Top

• PART 2 •

1 - Log in to Private Office:

  • A. Enter the URL private-office.myrealpage.com
  • B. Enter your username (the email address you used when signing up).
  • C. Enter your password (which you chose during the sign-up process).
  • D. Click Login.


2 - From the Dashboard:

  • A. Click the Website tab.
  • B. Click All Web Pages.



3 - In The Sidebar:

  • Look to the lefthand side of the screen and scroll down until you get to the Settings section. Click on the Advanced Settings link.



4 - From The Advanced Settings Page:

  • A. Go to the text area labeled Custom Content in the <head> section. 
    • Paste in the generated HTML code that you copied in Part 1 - Step 4 - C
    • Below the HTML code and in the same text area, type in the following string of text without the dashes: <style>*{--------}</style>
    • In the string of text you just typed in, replace the dashes with the CSS code that you copied in Part 1 - Step 4 - D
  • B. Once you're done, click on the Save button.




If you want to learn more about styling Google fonts in CSS, check out their dev tutorials!


Back to Top