CODEWITHSUNDEEP
htmlcsswordpressgoogle-chromefonts
Amit Kaushal
Amit Kaushal

Reputation: 439

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

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.

Upvotes: 1

Views: 644

Answers (1)

Andy Furniss
Andy Furniss

Reputation: 3914

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

Upvotes: 1

Related Questions