Q:

fonts not displaying properly in chrome

I have following fonts in my style.css in my wordpress theme. 
@font-face {
    font-family: 'latoregular';    
    src: url('./fonts/lato-regular.eot');
    src: url('./fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/lato-regular.woff2') format('woff2'),
    url('./fonts/lato-regular.woff') format('woff'),
    url('./fonts/lato-regular.ttf') format('truetype'),
    url('./fonts/lato-regular.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bebasregular';
    src: url('./fonts/bebas___-webfont.eot'); 
    src: url('./fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/bebas___-webfont.woff2') format('woff2'),
    url('./fonts/bebas___-webfont.woff') format('woff'),
    url('./fonts/bebas___-webfont.ttf') format('truetype'),
    url('./fonts/bebas___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'coustardregular';
    src: url('./fonts/coustard-regular.eot');
    src: url('./fonts/coustard-regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/coustard-regular.woff2') format('woff2'),
    url('./fonts/coustard-regular.woff') format('woff'),
    url('./fonts/coustard-regular.ttf') format('truetype'),
    url('./fonts/coustard-regular.svg#coustardregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is the text in h2 element

The h2 element has font-family of coustardregular and font-weight of bold.  As you can see in the image the structure of letter T is very strange and so is with letter I. I got this problem only in chrome and nowhere else.  I tried this link also but it does not work and I have no idea about it.  Can anybody guide me over this.  

A:

Where are you getting your font files from?  I normally try to stick to using Google fonts rather than using loads of files because you know they'll work as they've been tried and tested whereas a lot of the time when you use the individual files, they've been converted from another file type which is where a lot of problems come from. 
Google Fonts has the Coustard font and you can use it simply by adding the following to your css file (at the top):
@import url(https://fonts.googleapis.com/css?family=Coustard);

...or head over to Google to customize - https://www.google.com/fonts/specimen/Coustard

