I am trying to make and embed a slideshow (of text, photo, audio, video, etc) in my site (HTML5) by loading webpages consecutively inside an iframe embedded in my first page. Most or all of the frame source pages, i.e. pages loaded inside first iframe are mine, but located in many different places. All of these pages are in an Indic language. Although I can use UTF-8 charset and lang="" declaration and that's probably enough functionally, but I also want to embed my preferred Indic unicode font in WOFF format via CSS3 @font-face rule , so the size and look of the text is uniform and the way I want it - throughout the slideshow.

Problem is, there are many many pages in the slideshow all located in various places with many more linked pages, and it is next to impossible, or at least would be extremely tedious, to embed my custom WOFF font in every single page (which will also require separate css and uploading of fonts in every single instance). Besides, this may make the slideshow very heavy, sluggish and cumbersome for the user, since it will have to load the custom Indic font again and again everytime a new page is loaded in the iframe. I am not sure about this though. Is that how it works? I ask this, because I noticed that when I embedded my custom WOFF font in the 'first' page, it did not have any effect on the pages loaded inside the iframe. If I embed the font in some of the pages in the iframe, the next pages still don't get my font.

Is there a way to embed my custom WOFF font only once, preferably in the first page where the first iframe is, and pass its effect on to all the pages embedded / loaded through the iframe and make their text show up as per my initially embedded woff font - without embedding my font in every single of them?

Please help!