Recently, we added an iframe to our company's website that I have been helping manage. This iframe is responsible for handling requests sent to our organization.
Interestingly, the headings on our website are styled using the following CSS:
color: #222;
font-size: 26px;
font-weight: normal;
text-decoration: none;
font-family: Carrois Gothic,sans-serif;
line-height: 120%;
margin-top: 5px;
I used the exact same markup for the headings within the iframe, but they appear differently when rendered. Can someone shed some light on why this is happening and suggest a solution to fix the issue?
You can view the site at this URL: . The heading at the bottom of the page is within the iframe, and the variation in rendering is noticeable with letters like capital V.