Google Fonts are free to use and you can view the options available at https://fonts.google.com Using Adobe Fonts requires an Adobe subscription, if you are a Creative Cloud subscriber, this is accessible from within the Creative Cloud app or your Adobe Account.
Video instructions
Access Custom Fonts
Navigate from Portfolio in the left sidebar to 'Design'
Click on 'Typography'
Select 'Custom Fonts'
Basic Plans are not able to access Custom Fonts. Upgrade to Pro or Pro Plus to unlock.
Use Font Service
Click 'Use Font Service'
Add Google Font Service
Search field for Google Fonts or Adobe Fonts, Select 'Google Fonts'
Field for pasting the Embed Code which includes JavaScript or CSS (once copied, see next steps…)
Finding your Google Font/s
Using your web browser go to https://fonts.google.com to search for the font/s you want to use.
Use Classification options to narrow down selection from choices available
Filter (or disable to see more fonts)
Font selected, click to see font Specimen
Font name
Type in field to see a preview
Preview of your text
Click to 'Select…' the font and weight to use
Be careful in your selection
If the font has many different weights and styles available, it is best to be very selective and only add one or two styles (Regular and Bold for example).
Adding extra fonts and styles that are not used can affect the performance of your website when viewing (as more code is loaded unnecessarily).
Additional fonts from the same family, ie. Extra Light, Light, Normal, Heavy will not be accessible within the Custom Font Library but could be applied using a CSS (Custom Style Sheet) Override in the Design > Code Editor > User Stylesheet CSS file but this is technical and may require our team assist you so please use the in-app chat icon if you are needing help with this.
Select and copy code
Selected family should open in right sidebar
Use on the web, the default
<link>or@importcan be usedCode is shown in this field, click the 'Copy' icon
Do not download the fonts (not required for adding to your website)
Return to Custom Fonts area
Paste the code copied from Google Fonts here
Click 'Continue'
System Name (non-editable)
Display Name (editable, but best to leave as the default name shown)
Click 'Save Fonts'
Google Fonts added successfully
Preview of the font added with the Display Name shown
Google Fonts shows as Font Service added
Delete icon (to remove, and/or replace)
Click 'Advanced' to select and use the newly added font
Using Custom Fonts for Website Title Text
Custom Fonts can be used with any Font selector dropdown, in the screenshot above and below the example is showing the Logo Font, as it is easier to see the preview on the right.
Logo Font activated dropdown
Click Browse Font Library
Preview of Logo Font (before using a Custom Font)
Your Custom Fonts will appear at the top
Preview of custom font/s (click to activate)
Preview of selected custom font will appear here
Format Fonts list
Live Site showing the Google Font 'Pacifico'
Adding more Google Custom Fonts
You can add more Google Fonts.
Font family name
Selecting specific font weight
Click 'View selected families' icon
Original 'Pacifico' font is still showing in the 'Selected families' pane
New 'Zilla Slab Highlight Bold 700' font added
<link>code includes both fontsClick icon to copy the code
Add second Google Font Service
Return to Portfolio > Design > Typography > Custom Fonts
Click 'Use Font Service'
Set as 'Google Fonts'
Paste code here
Click 'Continue'
Both fonts ready to be added (Pacifico and Zilla Slab Highlight)
'Save Fonts'
Two Google Font Services added
When adding a new Font Service, and it includes a font that has previously been added (so it appears twice in Custom Fonts list). Please Delete the original Font Service.
Original font
New Google Fonts added (has original font included)
Delete Original font
Delete Font Service
Warning prior to deleting a Font Service
'Delete Fonts'
Any fonts that were in active use will automatically switch to a default font.
New Font Service added with Pacifico and Zilla Slab Highlight
Website Text Logo preview showing with default font (not the originally selected 'Pacifico' font
Select Custom Font
Return to Portfolio > Design > Website Title and Logo > Logo Font > Font Library
Select newly added Custom Font
Preview showing Logo Text (Zilla Slab Highlight Bold 700 in example)
Save Changes
Add Adobe Font Service
Navigate to Portfolio > Design > Typography > Custom Fonts
Click 'User Font Service'
Search field for Google Fonts or Adobe Fonts, Select 'Adobe Fonts'
Field for pasting the Embed Code which includes JavaScript or CSS (once copied, see next steps…)
Adobe Creative Cloud App
You must have an Adobe Subscription (usually Creative Cloud) to access Adobe Fonts
Activate your Adobe Create Cloud App
Click on ƒ to activate
Click 'Browse More Fonts' or 'Browse Fonts' buttons
Finding your Adobe Font/s
Logged in to your Adobe Account the Adobe Fonts will appear in a web browser tab (not the Creative Cloud app).
Use 'Tags' to narrow down the list of available fonts
'Clear Filters' to reset
Font preview
Click
</>to access code
Add fonts to a Web Project
Enter a new project name, or select from your existing projects
Font checkbox ticked showing weight
Preview of font
Name of Web Project added
Click 'Create'
Copy Code
Use icon to copy CSS to clipboard
Edit Project
Click 'Done'
Return to Custom Fonts
Paste code
Click 'Continue'
Adobe Fonts Service Added
Preview of font Added
Identifying Adobe Fonts
Delete
Click 'Advanced' to select and use the newly added font
Using Custom Fonts for Website Title Text
As first shown with Google Fonts, Custom Fonts can be used with any Font selector dropdown, in the screenshot above and below the example is showing the Logo Font, as it is easier to see the preview on the right.
Logo Font activated dropdown
Click Browse Font Library
Preview of Logo Font (before using a Custom Font)
Adobe Font 'Gelato Luxe' selected
Preview updated
Editing Adobe Web Project Fonts
You can edit, add or remove Adobe Fonts from your existing Web Project at any time, once saved from Adobe, this will automatically update in your Custom Fonts area.
Return to your https://fonts.adobe.com account
Click 'Manage fonts'
Click 'Web Projects'
Web Project Name with Web Font Families included shown
Unique Project ID, this is included in the code snippet (3)
Code snippet with Project ID
Click 'Edit Project'
Web Project Name
Disable specific weights by un-checking 'tick'
Remove web font family (but keep Web Project code)
'Delete Project' (if you delete, you will need to also delete from Custom Fonts area as this will no longer work).
'Save Changes'
Add fonts to Adobe Web Project
Select the font family you want to add to your Adobe Web Project
Click
</>Select your existing Project Name from the dropdown
Only keep 'tick' next to fonts you are going to use, having all fonts in a font family load can slow your website down
Un-check (un-tick) fonts you will not use
Click 'Save'
Existing code snippet
The new fonts are automatically added to the code snippet. There is no need to copy and to add as an additional Adobe Fonts Service.
Click 'Done'
Return to Custom Fonts
Adobe Fonts updated to show the original (Gelato Luxe) and newly added Lft Etica Sheriff font
You can now use under any of the Typography Font dropdown selectors.
Using Google Fonts and Adobe Fonts at the same time
Adobe Fonts added
Google Fonts added
Viewing the Font Library
Your Custom Fonts (with Adobe Fonts or Google Fonts) will appear at the top of the Font Library
Built-in Format Fonts appear below Custom Fonts
New Adobe Font (Lft Etica Sherrif selected)
Preview of Website Logo Text
We hope you enjoy adding your own Google Fonts and/or Adobe Fonts to personalize your website.
Reach us online at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!