How to inherit the font from the parent of an iframe.
If this is impossible, what could be the alternative?
I maintain a small website. The main menu looks like this:
<!DOCTYPE html>
<html lang="nl">
<meta charset="utf-8">
<title>Container for iframe</title>
<style>
html, body, #main { height: 100%; }
iframe { height: 100%; width: 100%;}
body, #main { font-family: sans-serif; }
#main { background-color: azure; }
iframe, #main { height: 100%; width: 100%; }
</style>
<p>Container for iframe</p>
<p><a href="choice-1.html" target="content">Inherit font from iframe</a>
<p><a href="choice-2.html" target="content">Choice two</a>
<div id="main" style="background-color: azure; color: red">
<p>Show iframe below:
<iframe name="content" src="choice-1.html">
<p>Fall back.
</iframe>
</div>
</html>
This is the html of the child page:
<!DOCTYPE html>
<html lang="nl">
<meta charset="utf-8">
<title>Test</title>
<style>
html, body {font-family: inherit;}
</style>
<h1>I am choice one</h1>
<p>I try to inherit the font from my parent, but failed...
</html>
The problem is that the website should be manageable by someone with limited knowledge of html, css and javascript. A simple solution would be appreciated.