6

I would like to use a font in an iframe which I know will be loaded already in the parent html page: can the iframe css simply refer to it as if the user has it already? or will I have to load it again via @font-face?

benbyford
  • 603
  • 1
  • 8
  • 18
  • 1
    You will have to write @font-face on every page, but the font will not be downloaded twice, if that's what you're worried about. – Mr Lister Jun 08 '18 at 10:37

2 Answers2

5

A more general approach complementary to @Mr Lister s comment:

An inline frame (<iframe>) loads another HTML document within your HTML document and embeds it. Simplified you could say it is a website within a website.

The embedded CSS does not interfere with its parents CSS or the other way around since they belong to separate documents and only live within them. As @Mr Lister already pointed out, resources that are referenced in both documents will not be loaded twice.

Any changes to the appearance should be made in the child document itself rather than after loading it in an iframe. You could, however, use JavaScript and its libraries to inject basically anything (stylesheets etc.) into the loaded document. For security reasons browsers generally only allow this for iframes that have to the same domain as the parent. Check out this thread to learn more about injecting via JavaScript: Override body style for content in an iframe.

leonheess
  • 16,068
  • 14
  • 77
  • 112
2

CSS does not cascade into documents loaded into iframes, they are separate documents.

You will need to include @font-face in the stylesheet loaded into that document.

The file shouldn't be downloaded again, but loaded from the browser's local cache (assuming the server hosting the font has a reasonable configuration).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • this would lead me to believe that if its loaded from the cache then maybe a @font-face is not required? If one doesnt know the url of the font could you still refer to it knowing the parent has loaded loaded it is my question? – benbyford Jun 08 '18 at 14:48
  • "this would lead me to believe that if its loaded from the cache then maybe a @font-face is not required?" — It is required. If you don't use it then it won't be loaded at all (from the cache or otherwise). – Quentin Jun 08 '18 at 14:52
  • "If one doesnt know the url of the font could you still refer to it knowing the parent has loaded" — No. – Quentin Jun 08 '18 at 14:52
  • thanks Quentin happen to have evidence for an anwser? – benbyford Jun 19 '18 at 15:34