Using Google Fonts in ProductCart

Last Updated: Nov 02, 2018 01:44PM EDT

What is Google Fonts?

Google Fonts is a catalog of fonts that is free to use for projects such as websites. These fonts can be included in your ProductCart store as part of your theme to make a more robust presentation to visitors. Using Google Fonts in your ProductCart store theme involves two steps and takes some knowledge of HTML and CSS to incorporate. It also requires you to make modifications to files in your ProductCart theme folder. Make sure to back up all files before making changes.

Selecting Fonts

Visit https://fonts.google.com/ to search for fonts you want to use as part of ProductCart theme. Use the red and white + sign next to the font you want to add it to the Families Selected area at the bottom of the page. After you have made all your selections open the Families Selected area. In the Embed Font section make sure the Standard option in selected. Copy the <link> tag shown and paste it in the top of the theme.asp file in your ProductCart theme folder. You are allowed to have more than one <link> tag in this file.

Using Fonts

Once you have added the link tag you can use your fonts to style text in the CSS files of your theme. The Families Selected area on the Google Fonts page has a section that specifies how to incorporate the selected font. This can be used as the property and value of any selector. 

Example

Below you can see the theme.asp file for the Basic Blue default theme that comes with ProductCart version 5.x with the new Google Font added to the top:


In this image you can see the theme.css for the Basic Blue theme. In the #pcHeaderLogoText selector (which controls the look of the title of the site in the header) the new font-family property was added from Google Fonts.


The result is shown below. The Logo Text on the site is now displayed in the text selected from Google Fonts.

Menu

  • Support Forums
  • Video Tutorials
  • Support Request
  • Support Policy
647e99095133bd6d1ae916f97dc7f92f@productcart.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete