Changing the font - products embedded in website

Technical Q&A
1

I have several Shopify products embedded into my website. I’d like to change the font of the text of the products to make it more similar to fonts used on my site. It seems like most of the solutions I’ve found related to downloading and implementing a new font are just related to Shopify stores and not for people like me that embed the products into a website.

2

  1. Identify the embedded product elements: Inspect the embedded Shopify product on your website using your browser’s developer tools. Look for the specific HTML elements that contain the text you want to style. This could include product titles, descriptions, prices, etc.

  2. Add custom CSS: Once you’ve identified the HTML elements, you can apply custom CSS to change the font. You can either add the CSS directly to your website’s stylesheet or add it inline using the <style> tag.

    For example, let’s say you want to change the font of the product title. You can use the following CSS:

.your-product-title-class {
  font-family: "Your Desired Font", sans-serif;
}

Replace .your-product-title-class with the appropriate CSS class or selector for the product title element. Change "Your Desired Font" to the font you want to use. You can specify multiple font options separated by commas, and end with a fallback generic font like sans-serif in case the desired font is not available.

1 Like
3

Hi how would I add my adobe font that I would want to use on my website I’ve tried doing this before but I can’t get it to work any tips would be great