Issue Calling A Custom Font

[kenmckown]

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!

[Josh]

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.

[kenmckown]

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]

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]

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 · Accepted solution]

The type should be opentype, not otf.