Issue Calling A Custom Font

Forum|Forum|1 year ago
September 19, 2024
2 replies
1981 views

I am building out a guided landing page, trying to pull in a custom font to overwrite the entire page. I have uploaded the font into Design Studio. I am calling the font on the page:

<style type="text/css">
    @font-face {
    font-family: "Metronic Pro Black";
    src: url('https://go.autoshopsolutions.com/rs/180-DGD-014/images/Mostardesign - MetronicProBlack.otf') format("otf")
}
	
body {
 font-family: 'Metronic Pro Black', sans-serif !important;
}
</style>

I have also added it to my CSS I am calling:

<link rel="stylesheet" href="https://go.autoshopsolutions.com/rs/180-DGD-014/images/tire-style1.css">

body{
	font-family: 'Metronic Pro Black', sans-serif;
	font-size:12px;
	line-height:18px;
	color:#000000;
	font-weight:normal;
	
}

I am not sure if I am calling it wrong or some other issue is causing it not to pull. Any insight would be great!

Marketo

Best answer by SanfordWhiteman

The type should be opentype, not otf.

Josh-17

Adobe Champion

Looks correct, although woff / woff2 format is generally preferred for webfonts.
https://cloudconvert.com/otf-to-woff

It could be a CORS issue, are your landing pages also on go.autoshopsolutions.com?

If you are using Chrome you can right click the page and select "Inspect" then go to the "Network" tab and chose "Font" to see if the font is loading correctly or if there is an error.

If you share the URL of a sample landing page. I can check it out.

Helping companies increase revenue by leveraging technology and data.

K

kenmckownAuthor

Level 4

Yeah I have a page out there, I am not seeing it loading. I changed it to "opentype" and the font is still not working on the page itself.

https://go.autoshopsolutions.com/tgtest_92024_1.html

Dave_Roberts

Level 10

I'm not certain if it's an issue but one thing that always catches my eye are the spaces in the filename.

Maybe try renaming the file and uploading it to Marketo so that instead of this:

https://go.autoshopsolutions.com/rs/180-DGD-014/images/Mostardesign - MetronicProBlack.otf

"Mostardesign - MetronicProBlack.otf"

... it looks like this instead:

https://go.autoshopsolutions.com/rs/180-DGD-014/images/Mostardesign-MetronicProBlack.otf

Alternately, you could try moving the @font-face declaration to your stylesheet instead of putting it on the template after your stylesheet. Maybe try adding it to the top of "tire-style1.css" and see if that helps?

SanfordWhitemanAccepted solution

Level 10

The type should be opentype, not otf.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded