Adding Adobe Font to Cargo Website

[defaultncxplm3u9ep7]

Hello,

I am trying to add Niveau Grotesk to my Cargo Website. I am using the normal light (300), regular (400), medium (500), and bold (700). It works great, however, when I hyperlink an item it underlines the text, which I do not want. If you are familiar with Cargo, there is not a simple undo underline button. I copied and pasted the html code directly from here and placed into the custom HTML section then went into the CSS editor to tell Cargo what weights to use for the bodycopy, H1, H2, and small text. I have tried entering text decoration: none to many parts of the CSS so I am guessing it has to do with the Adobe font file. Does anyone know why and how to fix this to prevent my text from being underlined when hyperlinked?

[Neelamk]

Hi there,

We are sorry for your difficulties as you are unable to use fonts on your Cargo website. We have some troubleshooting article links to help you with yours. Please refer to the below links:

https://helpx.adobe.com/in/fonts/using/add-fonts-website.html

https://helpx.adobe.com/in/fonts/kb/troubleshoot-adding-fonts-website.html

Please let us know how it goes and if it is helpful. We are here to help you.

Regards,

Neelam

[Test Screen Name]

There is no setting in a font file that controls whether to underline a hyperlink. So the solution, if there is one, lies in HTML/CSS. 

[Neelamk]

Hi There,

Yes, you are right the underline is not controlled by your Adobe Fonts setting, but by the website CSS. 

Regards,

Neelam

[Andrew Strauss]

THE QUICK ANSWER:

You have the right idea: it’s the CSS files that control whether hyperlinks have underlines, not the fonts. The trick is to know where to place the code.

THE MORE DETAILED ANSWER:

Blue underlined hyperlink text is one of the most classic features of the original World Wide Web. When Cascading Style Sheets were introduced, website designers finally had a reliable way to control the appearance of text, and especially hyperlinks.

Unfortunately, web browsers have a habit of fighting back. That means you have to quite particular about where you put the instructions about how hyperlinks – HTML element ‹a› – should look in your CSS code.

My habit is to use a special CSS file to kill all formatting in a website design, before rebuilding everything from scratch. The very last section of that CSS file contains this code:

/* Reset hyperlink appearances */

a, /* Standard hyperlink */
a:link, /* Unvisited link */
a:visited, /* Visited link */
a:hover, /* Cursor over link */
a:focus, /* Cursor over link */
a:active /* Select link */
   {
   font-weight: inherit;
   text-decoration: none;
   color: inherit;
   }

The above code definitively removes any underlines that might appear on any hyperlink text.

Keep in mind that CSS formatting is applied in order. That means if you define ‹a› with certain properties early on in your CSS code, you can override ‹a› with different properties later on in the code. That way, ‹a› could have multiple properties, but only the last value applies.

After my HTML code calls for my reset CSS file, I call another CSS file that formally defines the formatting for all my text. And at the end of that CSS file are my declarations on how to format ‹a› and its related ‹a:xxxx› friends. This is roughly what that code looks like:

/* Rebuild hyperlink appearance */

a /* Standard hyperlink */
   {
   /* You decide what to put here. */
   }

In summary: first reset what ‹a› looks like, using the ‘text-decoration: none;’ declaration to remove the underline. Then follow that CSS code with another declaration for ‹a› defining precisely how you want your hyperlink text to look on your website.

I hope that answers your question. If not, please let me know.

Best regards
Andrew

–30–

[defaultncxplm3u9ep7]

Thank you for the help everyone. If anyone else has this issue, I contacted Cargo who let me know that the "border-bottom" part of the CSS had to be changed to zero in order for the "text-decoration: none;" to work.

[fontchangerguru]

I was also facing same issues then I found https://helpx.adobe.com/in/fonts/using/add-fonts-website.html. this link It really helped me.