This problem drove me to distraction when I first started using @font-face fonts to set my web typography free. It's not particular to responsive designs, it can happen with any heading that has a @font-face font applied. Here's a portion of a design composite I was working on:
When I had built the site, the relevant markup was as follows:
<div class="intro">
<h1>We're Bridestone: <span>providing <b>beautiful</b> quality <i>natural</i> stone products.</span></h1>
…more code…
</div> <!-- intro:END -->And here was the relevant CSS:
.intro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-size: 2.63636364em;
line-height: 1em;
}
.intro h1 span {
font-size: 0.545454545em;
font-family: CaudexRegular, "Times New Roman", Times, serif;
font-weight: normal;
}However, although I was using @font-face so that I could use exactly the same font as the composite, the...