SharpSpring's Landing Page Designer enables you to quickly create landing pages without having to leave your marketing automation platform. Within the designer, you can add additional HTML, CSS, or JavaScript to provide further customization. This article will detail how to use a Google Font for text on your landing page.
Note: SharpSpring offers
Professional Services to assist with custom coding. You must have code knowledge in order to use the information within this article.
The following user roles can add Google Fonts to landing pages:
- Administrators
- Marketing Managers
Article Contents
Finding Fonts
To find and copy Google Fonts for use on a landing page, do the following:
- In a browser tab, navigate to https://fonts.google.com/.
- Click the + Plus icon next to each font family you want to use on your landing page.
- Click the pop-up bar at the bottom of the page.
- In the Google Fonts browser tab, in the pop-up window, click @Import.
- Copy the entirety of the first code block, including the
<style> tags.
|
|
Click to enlarge.
|
Inserting Google Fonts Code
To insert copied Google Fonts code into a landing page, do the following:
- In a new browser tab, log in to SharpSpring.
- In SharpSpring's top toolbar, click
Content > Pages.
- Create or edit a landing page.
- In the left panel, click
 Edit Code.
- Click the Pages drop-down menu.
- Select All Pages.
- Click the Head tab.
- Paste the copied Google Fonts code snippet into the Head tab.
- Click either Save or Save and Close.
|
|
Click to enlarge.
|
Designating Google Fonts Code
|
To set Google Fonts code parameters, do the following:
- In the pasted Google Fonts code, insert a line before the
</style> tag.
- In the Google Fonts browser tab, copy the second code snippet under Specify in CSS.
- In the SharpSpring browser tab, paste this code snippet into the new line before the
</style> tag.
- Wrap the code snippet in brackets
{ }.
- Designate whether this font will be applied to a paragraphs or headers by preceding the brackets with either
p, h1, h2, h3, h4, or h5 tags.
- Click Save and Close.
|
|
Click to enlarge.
|
|
Note: If you would like all of your paragraph text to have this Google Font, the code snippet will be as follows:
p { font-family: 'Raleway', sans-serif; }
|
Ready to Learn More?
Comments
0 comments
Article is closed for comments.