fonts not displaying properly in chrome - html

Question

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.

Answer 1

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