Sharing external fonts, via Muse


(Mattias Lindberg) #1

Creating a site with Muse and using OAM packages from Hype to add some extra animation, responsiveness and interactivity. How would I best use external fonts here? Feels like it would be a bad idea to load fonts in every export from Hype, as well loading the fonts from Muse as well.

How would you guys do it?


#2

Are you using Google Fonts? Or do you have a font package (otf, TTF, etc)?

If you double-reference Google Fonts you won’t hit any performance issues. The second reference will just load from your browser’s memory.

If you’re using a font package, when adding your font in Hype you should include this:

<style>
    @font-face {
        font-family: 'FuturaTOTBold', Arial, Helvetica;
        src: url('http://site.com/futuratot-bol-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://site.com/futuratot-bol-webfont.woff') format('woff'),
             url('http://site.com/futuratot-bol-webfont.ttf') format('truetype'),
             url('http://site.com/futuratot-bol-webfont.svg#FuturaTOTBold') format('svg');
    }
</style>

You would use the same format in Muse. Note that OAM packages are iframes, so you need to reference the font wherever you use it.

Again, even though you have it referenced multiple times, it will only download the first time as long as you have correct expires headers set for your font files.