: How to embed woff fonts for iframe source pages? 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
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!
More posts by @Smith883
1 Comments
Sorted by latest first Latest Oldest Best
When you use an iFrame you actually open a "window" of another domain. This is like browsing through different websites. If you add a resource (a font file for instance) on the page that hosts the iframes slider, you cannot manipulate the iframe slider (that is, the website inside) to use that font. (think of it - you can do iframe to any website in the world, even to Google); If you add the font to the website that is displayed inside the iframe slider, it is completely not connected to the other iframe slide, which is on another domain and using other resources (using the same analogy, think of doing a slider of Google, Bing, Yahoo and etc.). This limitation is done for security reasons.
What you CAN do though, is to add the font to the different websites that are displayed on the iframe, but let them to download the font file from the same resource. In other words, let them take the font file from the same URL (it can even be on Google Fonts). This way, the browser will see that it already has this resource (cached), it will not require to download the same font file every time the user go to another slide.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.