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.

Video instructions

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 Font/s

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

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

  2. Filter (or disable to see more fonts)

  3. Font selected, click to see font Specimen

  1. Font name

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

This additional article may help you.

Select and copy code

  1. Selected family should open in 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 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. Your Custom Fonts will appear at the top

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

  3. Preview of 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 specific font weight

  1. Click '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 icon to copy the code

Add 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 ready to be added (Pacifico and Zilla Slab Highlight)

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

  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 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 '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 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 icon to copy CSS to 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 shown

  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 'tick'

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

  4. 'Delete Project' (if you delete, you will need to also delete from 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 to 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 under 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 Sherrif selected)

  4. Preview of Website Logo Text

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

Reach us at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!

Related to

Related articles