• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Adobe Fonts in Shopify

New Here ,
Nov 20, 2020 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

36.2K

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
community guidelines
New Here ,
Jan 01, 2021 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.

Votes

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
community guidelines
New Here ,
Jan 22, 2021 Jan 22, 2021

Copy link to clipboard

Copied

This was hepful, thank you. However, I'm only able to change the font for body text and blog post headings. The chhanges don't affect other headlines on the website. Any advice?

Votes

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
community guidelines
New Here ,
Feb 08, 2021 Feb 08, 2021

Copy link to clipboard

Copied

All you have to do to make it just the body text is put it in like this:

body {
font-family: YOUR FONT, serif !important
}

Votes

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
community guidelines
New Here ,
Feb 08, 2021 Feb 08, 2021

Copy link to clipboard

Copied

oh, my mistake- you need the header. 

If it isn't working, find your other fonts in your theme file and remove the important tags from them. This usually is the issue.

Votes

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
community guidelines
Explorer ,
Feb 28, 2021 Feb 28, 2021

Copy link to clipboard

Copied

I canøt get this to work. Nothing changes in the theme. What could I be doing wrong? I'm not that familiar with coding. Are there some steps that I've might have overlooked?

Votes

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
community guidelines
New Here ,
Apr 22, 2024 Apr 22, 2024

Copy link to clipboard

Copied

LATEST

Hi Gemma I am also trying to get my adobe fonts working on my Shopify site (Prestige theme). I have added  the adobe cide to the head tag of theme.code.  At the bottom of this I have the following but I am not seeing the font change. 

h1, .h1, h2, .h2, h3, .h3, h4, .h4, .font-heading {
font-family: Campaign Serif , serif !important;
text-transform: none;
}

 

Can you advise further? 

Thankyou  Brigitte

 

Votes

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
community guidelines
New Here ,
Sep 25, 2023 Sep 25, 2023

Copy link to clipboard

Copied

Hi @lalaf1520 

To add Adobe Fonts to your Shopify Prestige theme, sign up for Adobe Fonts, select fonts, paste Adobe's code in your theme's HTML file, apply fonts using CSS selectors, preview, and publish. Ensure to back up your theme before making changes. This expands font choices beyond Shopify's limited selection.

 

for more details, visit https://swishtag.com/how-to-update-shopify-theme-without-losing-customization/. It is a good resource if you have any confusion related to shopify themes upgradation, and its customization

 

Thanks

Best Regards

David

Votes

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
community guidelines