Help Adding a custom font

1

Hello Again Hype Community,

Forgive me if this has been solved elsewhere, but I’m struggling to add a custom font.

I felt like I followed the instructions to the letter, and i -am- getting the font to show on the preview pane as I edit the page, but when I try to preview the website using an iPad (the site will only be accessible via iPad) the fonts don’t carry over.

My font is DinPRO.otf

My header html code looks like this:

   <style>
    @font-face {
        font-family: 'DinPRO';
        src: url('${resourcesFolderName}/DinPRO.otf?#iefix') format('open-type'),
		url('${resourcesFolderName}/DinPRO.otf') format('otf');
    }
</style>

I know i’ve been successful adding the font to the resources library, and to the available font families. Will the font only show up properly on an iPad after the the website has been compiled? How come the custom fonts aren’t showing up when I use Tumult Hype Reflect and view with my iPad?

Thanks again.

Scott

3

Hi Scott, I'm not usre if this will help, but take a look at...

4

Thanks @gasspence

Another thing which may help:

Add this to your .htaccess file:

# Add correct content-type for fonts 
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/x-woff .woff
AddType image/svg+xml .svg

This ensures that your server (which I’m guessing is run on Apache) can serve font files to browsers requesting it.

They are likely appearing on your iPad because Hype (Your Mac) is serving the correct mime-types for your fonts, but your server is not.

Here’s more info on how to install this htaccess file on your server: Fixing broken video, audio, & fonts and configuring your server to correctly serve content under the correct content-type

1 Like