Deploying a remote advert with web fonts


(Paul) #1

Hi,
I’ve been working on a small Hype project - an online advert banner. We’re using custom fonts for the text. Now, the advert and its resources will be hosted on my client’s server, BUT the advert itself will appear on a different site. Ideally, we need to be able to build for this kind of situation because there appears to be a problem with some of the web font files loading in this scenario.

So, in my head HTML I have this:

<style>
@font-face {
  font-family: 'GrilledCheese';
  src: url('${resourcesFolderName}/grilcbto.eot'); /* IE9 Compat Modes */
  src: url('${resourcesFolderName}/grilcbto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('${resourcesFolderName}/grilcbto.woff') format('woff'), /* Modern Browsers */
       url('${resourcesFolderName}/grilcbto.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('${resourcesFolderName}/grilcbto.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}
</style>

When I build the page, and prepare the .html file for remote viewing (ie the HTML will be on server A and the actual advert on server B), I have to edit any references to the Hype animation like this:

<style>
@font-face {
  font-family: 'GrilledCheese';
  src: url('http://path.to.server.B/Advert/Advert.hyperesources/grilcbto.eot'); /* IE9 Compat Modes */
  src: url('http://path.to.server.B/Advert/Advert.hyperesources/grilcbto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://path.to.server.B/Advert/Advert.hyperesources/grilcbto.woff') format('woff'), /* Modern Browsers */
       url('http://path.to.server.B/Advert/Advert.hyperesources/grilcbto.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://path.to.server.B/Advert/Advert.hyperesources/grilcbto.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}
</style>

...

<!-- copy these lines to your document: -->

	<div id="advert_hype_container" style="margin:auto;position:relative;width:600px;height:90px;overflow:hidden;" aria-live="polite">
		<script type="text/javascript" charset="utf-8" src="http://path.to.server.B/Advert/Advert.hyperesources/advert_hype_generated_script.js?54032"></script>
	</div>

	<!-- end copy –>

The good news is that it almost all works - the animation loads, and runs. BUT the webfonts don‘t - and Safari reports that they can not be loaded because it is expected that they are on Server A, where the HTML file is.

So, the immediate question is - how to stop these errors? Are the paths somehow embedded in the scripts that Hype outputs? If so, I’d have to hardcode the correct paths to the fonts in the markup in Hype (which may not be a good idea, depending on your feelings on such matters).

The long term question is asking for more flexibility in the location of resources when a deployment build is made (as opposed to a development build which may be necessary for client approval, internal testing, etc., where resources etc. are as you would expect).

We can solve this by deploying an iFrame, and this is what I expect the advert people being used will do, but it would be nice to be able to use other HTML methods as well.


(Hans-Gerd Claßen) #2

i guess you’ve added the fonts via the contextmenu of hype. those references will be stored in the js. you should be solved when NOT to use the hypedialog, though the fonts won’t be avaiable in the hypemenu, just htmltags …