SOLVED

Issue Calling A Custom Font

Go to solution
kenmckown
Level 3

Issue Calling A Custom Font

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!

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Issue Calling A Custom Font

The type should be opentype, not otf.

View solution in original post

5 REPLIES 5
Josh
Level 4 - Champion

Re: Issue Calling A Custom Font

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.
Screenshot 2024-09-19 at 3.08.41 PM.png
If you share the URL of a sample landing page.  I can check it out.


 

Helping companies increase revenue by leveraging technology and data.
kenmckown
Level 3

Re: Issue Calling A Custom Font

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

Re: Issue Calling A Custom Font

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?

SanfordWhiteman
Level 10 - Community Moderator

Re: Issue Calling A Custom Font

Your HTML is broken. You can’t nest <style> tags.

	<style>
    
    <!--Variables END-->
    
<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("opentype")
}
	
body {
 font-family: 'Metronic Pro Black', sans-serif !important;
}
</style>
      
<style>

 

(The space in the URL isn’t the problem, it’s the broken markup.)

SanfordWhiteman
Level 10 - Community Moderator

Re: Issue Calling A Custom Font

The type should be opentype, not otf.