Matching Fallback Font Size

With a similar rule applied when the font is loading but not done yet, we can parry differences in font
metrics between the web font and the fallbacks . This is important because when the web font replaces the
fallback font, you want this change in size to be as discreet and unnoticeable as possible.
In our example, the Alegreya font has a noticeably smaller x-height than Helvetica and Arial (both of
which have similar metrics). By tweaking the font-size and line-height slightly, we can match the height
pretty closely. Similarly, we can adjust for differences in the character widths by tweaking word-spacing
slightly. This way, we end up with a result that much more closely resembles what the text will look like once
the web font has loaded.
.wf-alegreyasans-n4-loading p {
font-size: 0.905em;
word-spacing: -0.11em;
line-height: 1.72;
font-size-adjust:
}
■