Looking to modify the font weight and color anywhere my brand name shows up, to match my logo.

[empiricalarby]

Website: https://empiricalwater.com/

Brand name: empirical water

How it should appear anywhere the brand name shows up:

For reference, font is Roboto Condensed Black (font weight 900), and color codes are 15436D and 00c7ff.

Anyone able to implement this is an absolute legend. Cheers, appreciate any effort towards this.

[Guleria]

Hello @empiricalarby ,

Not possible to provide instructions to implement it but I can share ideas. Maybe it will be helpful.

Write a script which will detect the specific siring from each page and wrap it with a class.
Parallel to this we need to assign css with that class. In this way this string will look as you need.

Another way is to manually edit the string all over the store, assign the class and do css.

Thanks

[Roy_12]

Hey @empiricalarby

Challenge accepted.

To get started, follow these steps:

1. Log in to your Shopify Admin panel.
2. Go to Online Store > Theme > Edit code.
3. In the code editor, navigate to the theme.liquid file.
4. Add the below line of code just above the ending tag.

​

• navigate to the base.css file and add the below CSS at the end.

.brand-logo span:nth-child(1) {
  color: #15436D;
  font-family: 'Roboto Condensed';
  font-weight: 900;
}

.brand-logo span:nth-child(2) {
  color: #00c7ff;
  font-family: 'Roboto Condensed';
  font-weight: 900;
}​

• Result:

[empiricalarby]

I’m extremely impressed with what you managed to do on the first try! I did notice a couple of issues though. Here’s what I found, please check this page for reference: https://empiricalwater.com/products/empirical-water-sample

So the product titles need to be affected as well:

The following is the shop page: https://empiricalwater.com/collections/all

I also noticed this issue on the product page linked earlier:

I also noticed that the font weight isn’t quite high enough. The font weight seems to be capped at “bold” but it needs to be “black”. Here’s a link to the font file: https://drive.google.com/file/d/1mQ8ETvFeYQDWTnlGZi1tzvJLiEURAdFW/view?usp=drive_link

Edit: fixed that font weight issue by adding “black” to the end of the font name. Other issues still remain however. Also noticed this issue on mobile:

Thank you very much, wasn’t expecting such a great effort so soon after posting. Thanks again.

[Roy_12]

Thanks @empiricalarby . I appreciate the encouragement.
Let’s replace the earlier JavaScript with this one.

document.addEventListener("DOMContentLoaded", () => {
  const elements = document.querySelectorAll("strong, h1, h2, h3, h4, h5, h6");
  elements.forEach((element) => {
    const textContent = element.textContent;
    if (textContent.includes("empirical water")) {
      element.classList.add("brand-logo");
      const newHtml = textContent.replace(/(empirical)\s*(water)/, `$1 $2`);
      element.innerHTML = newHtml;
    }
  });
});

[empiricalarby]

Thanks, I just tried adding this where the old code used to be in theme.liquid but it looks like it did before any edits. Can you check the live website again? Thanks

[empiricalarby]

Nevermind, I had accidentally deleted the and I added it back in.

It looks pretty awesome on desktop now. I just noticed one issue on the shop page where some of the fonts are really small.

https://empiricalwater.com/collections/all

Edit: Also noticed just now I can’t click on any of the products on that page anymore whether on desktop or mobile.

Other than that, amazing work for the desktop. Looks like the font isn’t loaded on mobile. Appreciate the help!

[Roy_12]

It seems that the font is not being applied on Windows or Mobile systems. The screenshot above has all the font faces which are currently added to the website, which you can typically find in the theme.liquid file.

To resolve this issue, we need to add the font face of Roboto Condensed for Black (font weight of 900).

To fix this, please follow the steps below:

1. Download the Roboto Condensed font from here if you don’t have it already. Ensure that it is in WOFF2 format for better site performance.
2. Upload the Roboto Condensed Black font to the assets folder.
3. Go to theme.liquid and locate the font faces. Create a similar font face CSS code like the one below and paste it above everything, just after the opening tag.

By following these steps, we can add the Roboto Condensed font face for Black and ensure that it is applied correctly on Windows systems.

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Condensed Black'), url('{{ RobotoCondensed-Black.woff2 | asset_url }}') format('woff2');
}

[Roy_12]

Hey @empiricalarby ,

Let me check on this. Could you please remove the JavaScript code while I take a look?

[empiricalarby]

Have I followed your steps correctly?

I noticed a yellow underline under RobotoCondensed-Black.woff2, and the pop-up says Unknown object used.

I don’t see any of this applied to the live website. Thanks

[Roy_12]

Hey @empiricalarby ,
We are almost there, I am sure this code will be the final polished one that will solve all the issues. Please replace the earlier JavaScript code with this one. Kindly make sure that it is inside a tag.

document.addEventListener("DOMContentLoaded", () => {
  const elements = document.querySelectorAll("strong, a, h1, h2, h3, h4, h5, h6");
  elements.forEach((element) => {
    const textContent = element.textContent;
    if (textContent.includes("empirical water") && element.childElementCount < 1) {
      element.classList.add("brand-logo");
      const newHtml = textContent.replace(/(empirical)\s*(water)/, `$1 $2`);
      element.innerHTML = newHtml;
    }
  });
});

[Roy_12]

We are 90% done! Great job @empiricalarby .

This is an example of the format of the @font face.

@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | asset_url }}") format("[font-format]");
}

The ‘font-file-name’ needs to match with the font file name uploaded in the assets folder and should be wrapped in quotes. I missed it in my earlier code. My apologies.
Please apply the changes and also provide me with the screenshot of the font file present in the assets folder so that I can check and confirm.

[empiricalarby]

This is by far the closest solution yet, no broken links! All functionality works as intended, and desktop looks perfect. There’s just one remaining issue and that’s how it shows up on mobile (safari, iOS). The font looks like this on iPhone:

Major thanks for staying with me so far. Eager to accept the solution once this last issue is fixed. Cheers

Edit: I noticed the issue also applies to my MacBook Pro, also on Safari.

[empiricalarby]

I think I made a mistake somewhere in here:

[Roy_12]

We are almost done. Once we add the font, the font issue from all the devices will be eliminated!
You are very close, please use the below code.

@font-face {
  font-family: "Roboto Condensed";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("{{ 'RobotoCondensed-Black.woff2' | asset_url }}") format("woff2");
}

Please make sure to change back the classes to how it earlier in base.css

.brand-logo span:nth-child(1) {
  color: #15436D;
  font-family: 'Roboto Condensed';
  font-weight: 900;
}

.brand-logo span:nth-child(2) {
  color: #00c7ff;
  font-family: 'Roboto Condensed';
  font-weight: 900;
}​

[empiricalarby]

Awesome, it’s looking pretty good on all platforms now, just one issue is that it looks “bold” on Safari and Macbook instead of “black” font weight. On Windows desktop it’s 100% perfect. Any idea if there’s a fix for this?

[Roy_12]

There could be an issue with the font file. Can you try the below font file. Just rename it to “RobotoCondensed-Black.woff2” and upload it in the assets folder?

https://cdn.shopify.com/s/files/1/0713/5055/0746/files/RobotoCondensed-ExtraBold.woff2?v=1721805760

[empiricalarby]

I didn’t see any change as a result.

[Roy_12]

That’s unfortunate. I had really hoped it would work. Since it’s a font issue, maybe trying out different formats will help.