Skip to main content

Using Custom Fonts from Google Fonts and Adobe Fonts

Updated

You can now add Custom Fonts from Google Fonts and/or Adobe Fonts to personalize your website (requires a Pro or Pro Plus account).

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.

Access Custom Fonts

  1. Navigate from Portfolio in the left sidebar to 'Design'

  2. Click on 'Typography'

  1. Select 'Custom Fonts'

Basic Plans are not able to access Custom Fonts. Upgrade to Pro or Pro Plus to unlock.

Use Font Service

  1. Click 'Use Font Service'

Add Google Font Service

  1. Search field for Google Fonts or Adobe Fonts, Select 'Google Fonts'

  2. Field for pasting the Embed Code, which includes JavaScript or CSS (once copied, see next steps…)

Finding your Google Fonts

Using your web browser, go to https://fonts.google.com to search for the fonts you want to use.

  1. Use Classification options to narrow down the selection from the choices available

  2. Filter (or disable to see more fonts)

  3. Font selected, click to see font Specimen

  1. Font name

  2. Type in the field to see a preview

  3. Preview of your text

  4. 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. However, this is highly technical and may require our team to assist you, so please use the in-app chat icon if you need help with this.

This additional article may help you.

Select and copy the code

  1. Selected family should open in the right sidebar

  2. Use on the web, the default <link> or @import can be used

  3. Code is shown in this field. Click the 'Copy' icon

  4. Do not download the fonts (not required for adding to your website)

Return to Custom Fonts area

  1. Paste the code copied from Google Fonts here

  2. Click 'Continue'

  1. System Name (non-editable)

  2. Display Name (editable, but best to leave as the default name shown)

  3. Click 'Save Fonts'

Google Fonts added successfully

  1. Preview of the font added with the Display Name shown

  2. Google Fonts shows as Font Service added

  3. Delete icon (to remove, and/or replace)

  4. 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 screenshots above and below, the example is showing the Logo Font, as it is easier to see the preview on the right.

  1. Logo Font activated dropdown

  2. Click Browse Font Library

  3. Preview of Logo Font (before using a Custom Font)

  1. Your Custom Fonts will appear at the top

  2. Preview of custom font/s (click to activate)

  3. A preview of the selected custom font will appear here

  4. Format Fonts list

  1. Live Site showing the Google Font 'Pacifico'

Adding more Google Custom Fonts

You can add more Google Fonts.

  1. Font family name

  2. Selecting a specific font weight

  1. Click the 'View selected families' icon

  1. Original 'Pacifico' font is still showing in the 'Selected families' pane

  2. New 'Zilla Slab Highlight Bold 700' font added

  3. <link> code includes both fonts

  4. Click the icon to copy the code

Add a second Google Font Service

Return to Portfolio > Design > Typography > Custom Fonts

  1. Click 'Use Font Service'

  2. Set as 'Google Fonts'

  3. Paste code here

  4. Click 'Continue'

  1. Both fonts are ready to be added (Pacifico and Zilla Slab Highlight)

  2. 'Save Fonts'

Two Google Font Services added

When adding a new Font Service, it includes a font that has previously been added (so it appears twice in the Custom Fonts list). Please Delete the original Font Service.

  1. Original font

  2. New Google Fonts added (has original font included)

  3. Delete Original font

Delete Font Service

  1. Warning prior to deleting a Font Service

  2. 'Delete Fonts'

Any fonts that were in active use will automatically switch to a default font.

  1. New Font Service added with Pacifico and Zilla Slab Highlight

  2. 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

  1. Select the newly added Custom Font

  2. Preview showing Logo Text (Zilla Slab Highlight Bold 700 in example)

Save Changes

Add Adobe Font Service

Navigate to Portfolio > Design > Typography > Custom Fonts

  1. Click 'User Font Service'

  1. Search field for Google Fonts or Adobe Fonts, Select 'Adobe Fonts'

  2. 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

  1. Activate your Adobe Create Cloud App

  2. Click on ƒ to activate

  3. Click the 'Browse More Fonts' or 'Browse Fonts' buttons

Finding your Adobe Font/s

  1. Logged in to your Adobe Account, the Adobe Fonts will appear in a web browser tab (not the Creative Cloud app).

  2. Use 'Tags' to narrow down the list of available fonts

  3. 'Clear Filters' to reset

  4. Font preview

  5. Click </> to access the code

Add fonts to a Web Project

  1. Enter a new project name, or select from your existing projects

  2. Font checkbox ticked, showing weight

  3. Preview of font

  1. Name of Web Project added

  2. Click 'Create'

Copy Code

  1. Use the icon to copy CSS to the clipboard

  2. Edit Project

  3. Click 'Done'

Return to Custom Fonts

  1. Paste code

  2. Click 'Continue'

Adobe Fonts Service Added

  1. Preview of font added

  2. Identifying Adobe Fonts

  3. Delete

  4. 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.

  1. Logo Font activated dropdown

  2. Click Browse Font Library

  3. Preview of Logo Font (before using a Custom Font)

  1. Adobe Font 'Gelato Luxe' selected

  2. 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

  1. Click 'Manage fonts'

  2. Click 'Web Projects'

  1. Web Project Name with Web Font Families included

  2. Unique Project ID, this is included in the code snippet (3)

  3. Code snippet with Project ID

  4. Click 'Edit Project'

  1. Web Project Name

  2. Disable specific weights by un-checking the checkbox

  3. Remove web font family (but keep Web Project code)

  4. 'Delete Project' (if you delete, you will need to also delete from the Custom Fonts area as this will no longer work).

  5. 'Save Changes'

Add fonts to Adobe Web Project

  1. Select the font family you want to add to your Adobe Web Project

  2. Click </>

  3. Select your existing Project Name from the dropdown

  4. Only keep 'tick' next to fonts you are going to use. Having all fonts in a font family load can slow your website down

  5. Un-check (un-tick) fonts you will not use

  6. Click 'Save'

  1. Existing code snippet

  2. The new fonts are automatically added to the code snippet. There is no need to copy and add as an additional Adobe Fonts Service

  3. Click 'Done'

Return to Custom Fonts

  1. Adobe Fonts updated to show the original (Gelato Luxe) and newly added Lft Etica Sheriff font

You can now use any of the Typography Font dropdown selectors.

Using Google Fonts and Adobe Fonts at the same time

  1. Adobe Fonts added

  2. Google Fonts added

Viewing the Font Library

  1. Your Custom Fonts (with Adobe Fonts or Google Fonts) will appear at the top of the Font Library

  2. Built-in Format Fonts appear below Custom Fonts

  3. New Adobe Font (Lft Etica Sheriff selected)

  4. Preview of Website Logo Text

We hope you enjoy adding your own Google Fonts and/or Adobe Fonts to personalize your website.

Still have questions? Reach us on our live chat or email us at info@format.com. We’re here to help!

Related to

Related articles