It is possible that there is no mistake on your end. Here are some factors to consider, some within your control and others not.
- To ensure, set
vertical-align: baseline explicitly.
- The different files (
.eof, .woff, .ttf) may not be defined the same, leading to variations in display across browsers.
- Having two
src calls might cause issues. Try removing the second one:
@font-face {
font-family: 'Gabriola';
src: url('Gabriola.eot'),
url('Gabriola.eot?#iefix') format('embedded-opentype'),
url('Gabriola.woff') format('woff'),
url('Gabriola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
These are suggestions which would require testing #1 and 3. If issue #2 persists, finding a solution may not be straightforward.
Remember the advice from this source:
Font rendering can vary greatly between browsers and operating systems. Some developers have faced challenges with Windows and Internet Explorer causing them to avoid custom fonts altogether. It's important to check the results across all browsers to verify quality.
Update
This post offers tips for resolving rendering issues specifically related to Font Squirrel. The recommendation includes:
If you downloaded the kit, consider regenerating the font using the generator. Regular adjustments are made to improve hinting and rendering of the font.
However, it is mentioned,
In most cases, the root cause is an issue with the original font file.
This aligns with point #2 that was mentioned earlier.