fonts not displaying properly in chrome

1 Views

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

Read More

enter image description here

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.

Post Views: 1

Related posts

1 comment

  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

Comments are closed.