Embedded Myfonts.com digital Ads Fonts to Hype

[Valle (Valérie Girard)]

I'm trying to import a font made specifically for Ads, purchased from MyFonts.com. (Bodonis Bold, Faktum, Vanitas etc)
In my kit I have a .css file and 2 file : fonts.woff files and font.woff2
I follow the tutorials already offered on this site but it does not work. How do I ensure that Internet users can see my font on the screen?

@font-face {
font-family: "VanitasBold";
src: url('webFonts/VanitasBold/font.woff2') format('woff2'), url('webFonts/VanitasBold/font.woff') format('woff');
}
@font-face {
font-family: "BodoniSansDisplayBold";
src: url('webFonts/BodoniSansDisplayBold/font.woff2') format('woff2'), url('webFonts/BodoniSansDisplayBold/font.woff') format('woff');
}
@font-face {
font-family: "FaktumLight";
src: url('webFonts/FaktumLight/font.woff2') format('woff2'), url('webFonts/FaktumLight/font.woff') format('woff');
}
@font-face {
font-family: "FaktumRegular";
src: url('webFonts/FaktumRegular/font.woff2') format('woff2'), url('webFonts/FaktumRegular/font.woff') format('woff');
}

[h_classen (Hans-Gerd Claßen)]

Tumult Hype Documentation

put the woff-files in the resources-panel, change the url-path accordingly ... follow the steps in the link above

[Valle (Valérie Girard)]

I tried :

@font-face {
font-family: "VanitasBold";
src: url('webFonts/VanitasBold/font.woff2') format('woff2'), url('webFonts/VanitasBold/font.woff') format('woff');
}

an d I tried this

@font-face { font-family: "BodoniSansDisplayBold"; src: url('${resourcesFolderName}/webFonts/BodoniSansDisplayBold/font.woff2')) format('woff2'), url('webFonts/BodoniSansDisplayBold/font.woff') format('woff'); } nothing work :frowning:

[Valle (Valérie Girard)]

Maybe I forgot the : ${resourcesFolderName}/
before url'('webFont/BodoniSansDisplayBold/font.woff'

[Valle (Valérie Girard)]

160x600-Test.zip (120.2 KB)

[Valle (Valérie Girard)]

BodoniSansDisplayBold-MyFontsWebfontsKit.zip (61.6 KB)

[Daniel]

It should be the following, since its not in a folder called 'webfont' it is in the root directory of the resources folder based on how Hype manages resources:

<style> 
@font-face {
  font-family: "BodoniSansDisplayBold";
  src: url('${resourcesFolderName}/font.woff2') format('woff2'), url('${resourcesFolderName}/font.woff') format('woff');
}
</style>

[Valle (Valérie Girard)]

@Daniel

<style> 
@font-face {
  font-family: "BodoniSansDisplayBold";
  src: url('${resourcesFolderName}/font.woff2') format('woff2'), url('${resourcesFolderName}/font.woff') format('woff');
}
<style>

Héhé Thanks a lot Daniel, all is good for me I can see Bodoni Bold font in my design.
Do I have a guarantee that web users will see the font?

[Daniel]

Always worth testing on browsers you want to support, but the .woff file format has great compatibility: WOFF - Web Open Font Format | Can I use... Support tables for HTML5, CSS3, etc

For testing, check out https://www.browserstack.com/

[Valle (Valérie Girard)]

Hi Daniel, on screen I saw Bodoni font on my design... but when a click on the preview or export in DCM (Double Click Manager) I have a blank preview (I don't have a Ad blocker in my Browsers). Do you know why it's happen ?

[Daniel]

I do not -- what errors do you see in the browser's developer tools? Are you using an Export Script?

[Valle (Valérie Girard)]

@Daniel

I do not -- what errors do you see in the browser's developer tools? Are you using an Export Script?

Without the css font introduced in the code, everything works normally (in the preview of Chrome v.113 and Firefox, on Mac)

[Valle (Valérie Girard)]

Hype4 gives me no errors, just a blank web page. I used the DoubleClick DCM Export Script

[Daniel]

Seems like that platform may not support custom fonts (That are not Google Web fonts) and you should create a transparent PNG of your text and use a regular image instead.

[Valle (Valérie Girard)]

It's a shame, selling a font for HTML advertising banners and we can't use it with the most used platforms on the web. Use png for text create blurry text lol

Under what circumstances can I use a font specially designed for html advertising banners? A newsletter? Because I also have the font in web, print and digital ad format

[Daniel]

I had a small typo in my font code which only appears during preview. Can you try this document?

TEST-160x600-BodoniFont.hype.zip (119.1 KB)

[Valle (Valérie Girard)]

Wow, it's work. Thank Daniel.
I looked at the font code in Hype of your document, and the code looks exactly the same as mine. How did you make it work? (where was your typo?)

[Daniel]

I closed the tag with <style> when I should have used </style>

[Valle (Valérie Girard)]

@Daniel

</

Oh god, yes the </, I hadn't really seen it, I'm blind lol I will try for my other fonts a big thank you Daniel

[Daniel]

I'm blind too