Can I use Google Fonts on ONTRApages? [closed]

I see where I can choose from your selection of fonts inside the "Page Style" menu in ONTRApages, but my site is using three Google fonts I would love to include in my pages to make everything more consistent. Is there any way at all to use other fonts?

edit retag flag offensive reopen merge delete

Closed for the following reason the question is answered, right answer was accepted by Frank
close date 2016-07-11 07:43:30.674114

1 answer

Sort by » oldest newest most voted

Topic moved to: https://support.ontraport.com/hc/en-u...

Google Fonts can be used to replace all of the fonts on a page with the exception of the Body Text and Large Body Text fonts. Because this is an advanced process, we recommend you design your page in the ONTRApages Editor first, make a copy of it, and publish the copy on one of our free domains. Then take the following steps to replace an ONTRApages font with your cool new Google font. After testing you can apply this same process to your live page.

1). With the ONTRApage open in the Editor window, open a new tab or window and select the font you want to use at Google Fonts.

2). Click the “Quick-use” icon (it’s a right arrow in a box to the right of the font). image description

3). The Quick-use page will load with four steps. Select your options in step 1 and 2 for the font’s style and character set (the default selections are usually fine).

4). Copy the Standard Version of the code shown in step 3 to the clipboard. image description

5). Return to the ONTRApage and click the Settings tab. Paste the code from step 3 into the Custom Header Code section. It should look like this:

<link href=’https://fonts.googleapis.com/css?family=Passion+One’ rel=’stylesheet’ type=’text/css’>

6). Switch back to the Google fonts tab, and copy the CSS shown in step 4 to the clipboard. image description

7). Back on your ONTRApages tab, add <style type=”text/css”> below the Standard Version of the code you pasted into the Custom Header Code section. Press ENTER to go to the next line.

8). Choose which type element you want to change. We will use “triple notation” to ensure the font selection is used universally on the page for that element. Here are the type elements used in ONTRApages followed by the “triple notation” CSS declaration we will be using:

  • Header 1: .h1.h1.h1

  • Header 2: .h2.h2.h2

  • Header 3: .h3.h3.h3

  • Label: .label.label.label

  • Button: .button.button.button

  • Quote: .blockquote.blockquote.blockquote

9). For this example, we want our Google font to replace all the Header 1 text. Type the CSS declaration, an opening curly bracket and paste the CSS you copied in step 6 above. Add a closing curly bracket, press ENTER and add the closing </script> tag. It should look something like this:

<style type=”text/css”>

.h1.h1.h1 { font-family: ‘Passion One’, cursive; }


10). The completed Custom Header Code section will look like this:

image description

11). Click the Publish button to save and publish the ONTRApage. Because the font substitution is done as the page renders, you will not see the new Google font in the Editor window. Visit the published ONTRApage to see the results.

edit flag offensive delete publish link more

Question Tools

1 follower


Asked: 2016-04-20 06:26:23 -0700

Seen: 118 times

Last updated: Jul 11 '16