Adding a custom Web Font & Transparent Backgrounds

Hi all,

New user - bought a license after seeing how good Hype is. Stuck on a few things, could use direction:

  1. Fonts - I read the docs but not clear.

I want to locally add a .ttf file and have the font appear in Hype. So I added the font with the script, it shows in menus now (HVD Comic for example) but its not that font. Is ttf enough? Is the script correct?

@font-face { font-family: 'HVD Comic Sans Pro'; src: url('${resourcesFolderName}/HVD_COMIC_SANS.ttf') format('ttf'); }
  1. When I set background color of a html widget to transparent, its not registering. Tried this from the HTML code, in body.
    If anything, what would the javascript be after I get the element id? I can try that.

Thanks!

Hi Jon,

Welcome. How did you add the font? Could you be a little more specific. Where is the font from? and what ‘script’ did you use?

There are a few ways to add fonts to your project. Maybe an alternative such as referencing via css may work better. Also there could be a problem when previewing locally, etc.

The HTML widget issue. When adding a HTML Widget the background is set to transparent or “none” by default. Are you manipulating the widget via Javascript? The inspector is your friend here. Try changing the options in the inspector before you try coding anything. Unless your project requires coding.

Hope this helps!

D

Hi,

Heres what I tried… The font is HVD Comic Sans (as an example of one of two fonts I want to use).

I tried to import that directly into into Hype using the following steps:

  1. Wrote my css font family code -

    @font-face {
    font-family: ‘HVD Comic Serif Pro’;
    src: url(’${resourcesFolderName}/HVD_COMIC_SERIF_PRO.ttf’) format(‘truetype’);
    }

  2. I converted the .otf file to .ttf since I see that hype might not support otf? Its not referenced in the doc, but all the others are.

  3. Added resource file to project.

  4. Use the add css in the add font - defined the font name, css name, font family style (above, #1) and its just not recognizing the font in the grumpy wizard preview or anywhere else.

I also tried to host it on typefront - this worked - BUT I got frustrated when the font wouldnt show in the preview! I realize theres a way to resolve that - but at that point I decided to add locally hence where I am now (stuck, can’t add fonts).

Any suggestions to add based on my steps 1-4 from earlier? Anything else I can do?

Hi Jonathan,

Your CSS code needs to be inside a

<style></style>

tag. When adding the font. Also their is a link to download the webfont kit at fontsquirrel.com which if available should give you the four font files needed and lots of other goodies :smile:

Since you already converted the file I wouldn’t worry about that.

D

Here’s how I did it!

1 Like

DBear,

Thanks for the example - I was going to ask for one since I had wrapped it in Style already…

Hmmm. Ok I’m going to get the set anew and try from the top - it should take this time!

I’ll report back.

Ok - So I added a few fonts, looks great now. But when I preview - gone. This is reminiscent of earlier when I was hooking them from the web - but now they are locally stored so I’m not sure why they wouldn’t work on the preview? I was thinking reading them off the web had something to do with the host provider needing a host name.

So now, how can I resolve so the fonts appear in preview?

Make sure you point to them using the resource folder name code like above.

${resourcesFolderName}/...... * path to file here *

D

1 Like

Working now in my elements, including html widgets with a script add...... Thanks DBear for everything.

If you just use your own content within the widget, it will be transparent. Here's a test: widget test.zip (11.4 KB)

If you have a document which has a background color or image set somewhere in its code, it will fill the bounds of the widget and remove and transparency. You can either remove it, or override it by using background:none; later in your CSS definitions. Here's an example of a style overriding an earlier style:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background:#fff
}

body {
  background:none
}
</style>


</head>

<body>
 test content.
</body>
</html>