Managing Fonts in Pagecloud

Fonts are a great way to bring your brand, design and personality into your website.

Pagecloud has a good set of default fonts that you choose from at any time but lets you add additional fonts should you want to. Pagecloud makes it easy to add, preview and manage the fonts you use in your projects.

Fonts are specific to a project so if you have more than one project you will need to manage fonts separately.

New! This is a new feature, as you work on and save existing pages your fonts will become available on all pages and you can manage your fonts in the dashboard.

Sources of Fonts

You can add any web font to Pagecloud providing you endless design possibilities.

Fonts can be added through our Google Fonts and Adobe Fonts integrations or by uploading a web font from another source. Let's expand on these.

Google Fonts (free)

Google Fonts boast an impressive library of 1700+ open source font families that you can use for free in your projects. Explore Google Fonts at https://fonts.google.com/.

Google Fonts are the easiest to add to your site and where we recommend starting your search.

Looking for some inspiration? Have a look at our blog article on the Top 50 Google Font Pairings

Adobe Fonts (paid)

Adobe Fonts, (previously Typekit) provides a collection of 14,000+ font families. Adobe Fonts are available to Creative Cloud subscribers with easy access to their entire library of fonts through the click of a button

Explore Adobe Fonts (Account required)

Custom Fonts

There are countless sources and foundries where you can find free to use and licensed fonts. These sources will provide you with .WOFF or .WOFF2 font files that you can use in Pagecloud. Here are a few foundries to get you started:

My Fonts https://www.myfonts.com/
Type Type https://typetype.org/
Hoefler&Co https://typography.com/
Panagram Panagram https://pangrampangram.com/
Font Share (open source) https://www.fontshare.com/
Colllettivo (open source) https://www.collletttivo.it/
Uncut (open source) https://uncut.wtf/
Dalton Maag https://www.daltonmaag.com/
Commercial Type https://commercialtype.com/
P22 Type Foundry https://p22.com/
A2 Type https://a2-type.co.uk/

Note: Review the license agreement and make sure you have permission to use the font on your site.

Adding a Google Font

Google provides a lot of free to use, open source fonts that you can add to your website.

Manage fonts from inside your dashboard:

Navigate to your project
In the left sidebar select Fonts under the Tools heading
In Your Fonts click Add Font
In the Google Fonts block click the button Search and Add
Here you can search for fonts by name while seeing a preview of what the font will look like. If you don’t know the font you are looking for, you can browse all Google Fonts here.
Once you’ve found a font you like, select it then click the button Add Font
The font is now added to your list and will be available on your pages, popups and banners.
You can continue adding fonts or close the panel.

Other ways to add a Google font:

In the editor you can copy and paste the URL from Google fonts onto your page to add the font.
In the editor you can click the Add font link in the editing menu to open a search interface for Google Fonts.

Adding an Adobe Font

Note: Only one Adobe Fonts web project can be connected with a Pagecloud project.

To add Adobe fonts you will need to connect an Adobe Font project to your Pagecloud project, once that connection has been made, the fonts will be available in your Pagecloud project.

First, go to your Adobe Fonts account and create a Web project. Add the fonts you want to use into that project and publish the project. Check out this help article from Adobe for more.

Now that you have your Adobe Fonts project created and published, head to your Pagecloud account:

Navigate to your project
In the left sidebar select Fonts under the Tools heading
In Your Fonts click Add Font
If an Adobe Fonts web project has not already been setup, click the Connect button
Add the embed code from Adobe and click Connect. The embed code will look something like “https://use.typekit.net/abc1def.css”
Your Adobe Fonts project and Pagecloud are now connected! Fonts should display in your list and will be available on your website pages, popups, and banners.
If the fonts don’t immediately display click the Refresh Fonts button at to the top right of the font list.

Other ways to add an Adobe Fonts web project:

Copy the embed code from Adobe and paste it CMD+V (on Mac) or CTRL+V (on Windows) onto a page in the editor. Save the page.

Updating your list of Adobe Fonts

If you updated the project fonts at adobe after connecting the project you will need to press the Refresh Fonts button at the top right of the font list.

Switching to another Adobe Fonts web project

If you want to connect a different Adobe Fonts web project:

In Your Fonts click Add Font
In the Adobe Fonts block click Update Project
Enter the embed code for your new project and click Update Project

Adding a Custom Web Font

Sometimes Google Fonts just doesn't have what you need! We get it, your brand uses a custom font or you want that specific font from your favourite foundry. No problem, you can add web fonts from any source.

If you don’t already have the web fonts, start by licensing the font you want and downloading the web fonts to your desktop.

Pagecloud supports the following web font formats:

WOFF2: The best choice for modern web design because it's optimized for speed.
WOFF: A good fallback if WOFF2 is not available.
TTF/OTF: Larger in size and mainly used for desktop applications, not ideal for web use but you can use them if you need too.

Once you have your web font files, you can add them in your dashboard:

Navigate to your project
In the left sidebar select Fonts under the Tools heading
In Your Fonts click Add Font
In the Custom Fonts block, click the Upload button
Click the Upload Fonts button
Select the web font you want to upload (WOFF2 recommended)
If your Font family includes multiple fonts you will need to upload each one individually.
As fonts are uploaded they will display in your font list and will be available on your pages, popups and banners.

Other ways to add a custom font to your project:

Drag and drop the web font files from your desktop onto a page in the editor.

Removing a Font

As you explore fonts it’s easy to end up having several fonts in your project of which you may only be using a couple.

Note: All the fonts added to your project will be loaded on your pages. If you have a lot of fonts this can start to slow down your page speed.

Navigate to your project
In the left sidebar select Fonts under the Tools heading
Find the font you want to remove and click Edit
A side panel will open showing you a preview of the font, the wights available and the source.
Click Remove Font to remove the font from your project
You will be asked to confirm removing the font

If the font you removed was used to style some text in Pagecloud, that text will now default to a browser default font until such time as you apply a new font.

Managing and Adding Fonts