Search code examples
csswebfonts

Libre Baskerville regular embedded web font displays the letter "t" smaller than other lower case letters

I used FontSquirrel to convert Libre Baskerville to a web font. This is the CSS I added to my WordPress theme:

@font-face {
    font-family: 'libre_baskerville';
    src: url('librebaskerville-regular-wf.eot');
    src: url('librebaskerville-regular-wd.eot?#iefix') format('embedded-opentype'),
         url('librebaskerville-regular-wf.woff2') format('woff2'),
         url('librebaskerville-regular-wf.woff') format('woff'),
         url('librebaskerville-regular-wf.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'libre_baskerville';
    src: url('librebaskerville-bold-wf.eot');
    src: url('librebaskerville-bold-wf.eot?#iefix') format('embedded-opentype'),
         url('librebaskerville-bold-wf.woff2') format('woff2'),
         url('librebaskerville-bold-wf.woff') format('woff'),
         url('librebaskerville-bold-wd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

The lower case "t" displays smaller than all other lower case letters, but only in Libre Baskeville regular. The bold version displays correctly. Behavior is consistent across Firefox, IE and Chrome. Libre Baskerville with incorrect t

How do I fix this?

Solution

  • I think this is a bug within the source you've got? Have a look at google fonts and look for this particular one. This source has a version where "t" looks like it's supposed to.

    Link