Adobe Fonts in Shopify

New Here ,
Nov 20, 2020

Copy link to clipboard

Copied

Hello, 

 

I am using Shopify to build a website, using their Prestige theme. 

 

Does anyone have any advice on implementing the piece of code provided by Adobe Fonts when you set up a web project into a Shopify theme?

 

I would prefer to use the fonts available in Adobe Fonts since Shopify has a limited selection.  

TOPICS
How to, Import export

Views

117

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adobe Fonts in Shopify

New Here ,
Nov 20, 2020

Copy link to clipboard

Copied

Hello, 

 

I am using Shopify to build a website, using their Prestige theme. 

 

Does anyone have any advice on implementing the piece of code provided by Adobe Fonts when you set up a web project into a Shopify theme?

 

I would prefer to use the fonts available in Adobe Fonts since Shopify has a limited selection.  

TOPICS
How to, Import export

Views

118

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 20, 2020 0
New Here ,
Jan 01, 2021

Copy link to clipboard

Copied

Hi, I'm not sure whether you've fixed this yet but it's quite simple actually.

 

Steps below:

  • Go to Shopify and edit theme code.
  • In the <HEAD> tag of theme.liquid insert the 'Embed Project' code from your Adobe Web Projects page (it should look something like this: <link rel="stylesheet" href="https://use.typekit.net/*******.css">).
  • Save the changes.
  • Open theme.css and at the bottom of the code type the following to change the font of all h1 tags (you can choose and selector ie. h2, h3, p, or the id of a specific div for instance):

    h1 {
    font-family: orpheuspro, serif !important;
    }

    The correct code for the font you want to use can also be found in Web Projects under the font name, from there select the correct properties for the font you would like to use. '!important' tells the theme to overlook and previous styling for this specific line of code. This is the easiest solutions.
  • Set specific rules for each different font.

 

I hope this helps.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 01, 2021 1