Embedded Myfonts.com digital Ads Fonts to Hype

Elements Typography
22

I switched to a more efficient way, in my opinion, of embedding fonts in Hype. Just drop all the fonts into resources and put all your font declarations into a single styles.css that also is in the resource library. That way, you don't need to add the ${resourceFolderName} stuff at all. In your font declarations, just fill out the name for font and the mapping font to your CSS font name. Nothing in the HTML field…

… specially with multiple font files, this makes it effortless to manage and its all centralized.

23

MyFonts.com makes me a single zip file for all fonts purchased. So I put this only ''style.css'' in my declaration in Hype and I won't have to put ''${resourceFolderName}'' to each of them?

24

I did a test download from MyFonts… they have a strange packaging downloader called Webfont Kit Builder. The thing I don't like (making it strange) is that they don't put everything in a single folder and worst call all fonts … font.woff2 etc. only differentiating them by folders.

As the resource library doesn't have folders you can't follow my previous advise using myfonts without tweaking filenames and the CSS you receive from them.

1 Like
25

Yes I had difficulties at the beginning by wanting to deposit my font Faktum Regular and Faktum Light, both were called font.woff

So I changed my name before putting it in the Hype library. and I put at all a ${resourceFolderName}

26

Hi, your code has some errors that prevent it from working correctly. Here are some suggestions to fix them:

  • In your head tag, you are using a script tag to load the fonts, but this is not the correct way to do it. You need to use a link tag with the rel attribute set to “stylesheet” and the href attribute set to the URL of the fonts. For example:
    <link rel="stylesheet" href="https://hello.myfonts.net/count/3c8f0a">

  • In your style tag, you are using the wrong font names for the font-family property. You need to use the exact names that MyFonts.com provides for each font. For example:

.text {
  font-family: "Bebas Neue Pro";
}
.text2 {
  font-family: "Bebas Neue Pro Bold";
}
  • In your Hype project, you need to add the fonts to the resource library and set them as custom fonts. To do this, go to the Resource Library panel and click on the “+” button. Choose “Add Font…” and select the font file from your computer. Then, click on “Font Name” and enter the exact name of the font as provided by MyFonts. Repeat this for each font you want to use. Then, go to the Typography Inspector and select the custom fonts for your text elements.

Regards, Mia from CodeIT