Problems with @font-face from the same family

Asked

Viewed 436 times

5

I’m having a problem regarding CSS3 Font module.

I got a source with three guys: Bold, normal and Italic and insert them into the CSS with the same name but with the attributes referring to the font-Weight and style relative to each type. The problem is that in some browsers (Firefox and iOS Safari) do not read different sources (Bold and Italic), considering only the default. Firefox even tries to "simulate a Bold" by the original source, but it looks bad.

I wonder if anyone can help me with that without using different fonts for each type, for example: Gudeabold, Gudeaitalic.

Below follows the code.

@font-face {
    font-family: "Gudea";
    src: url('../font/Gudea-Italic-webfont.eot');
    src: url('../font/Gudea-Italic-webfont.eot?#iefix') format('eot'), url('../font/Gudea-Italic-webfont.ttf') format('truetype'), url('../font/Gudea-Italic-webfont.woff') format('woff'), url('../font/Gudea-Italic-webfont.svg') format('svg');
    font-weight: "normal";
    font-style: "italic"
}

@font-face {
    font-family: "Gudea";
    src: url('../font/Gudea-Bold-webfont.eot');
    src: url('../font/Gudea-Bold-webfont.eot?#iefix') format('eot'), url('../font/Gudea-Bold-webfont.ttf') format('truetype'), url('../font/Gudea-Bold-webfont.woff') format('woff'), url('../font/Gudea-Bold-webfont.svg') format('svg');
    font-weight: "bold";
    font-style: "normal"
}

@font-face {
    font-family: "Gudea";
    src: url('../font/Gudea-Regular-webfont.eot');
    src: url('../font/Gudea-Regular-webfont.eot?#iefix') format('eot'), url('../font/Gudea-Regular-webfont.ttf') format('truetype'), url('../font/Gudea-Regular-webfont.woff') format('woff'), url('../font/Gudea-Regular-webfont.svg') format('svg');
    font-weight: "normal";
    font-style: "normal"
}
css css3 css-font-face

1 answer

5

To fix the problem was simple.
When you do not specify the weight of the font, the browser tries to simulate it, so it generated fonts of different sizes. What I did was instead of putting Bold the heaviness source. This would be the case:

@font-face {
    font-family: "Gudea";
    src: url('../font/Gudea-Italic-webfont.eot');
    src: url('../font/Gudea-Italic-webfont.eot?#iefix') format('eot'), url('../font/Gudea-Italic-webfont.ttf') format('truetype'), url('../font/Gudea-Italic-webfont.woff') format('woff'), url('../font/Gudea-Italic-webfont.svg') format('svg');
    font-weight: 400;
    font-style: "italic"
}

@font-face {
    font-family: "Gudea";
    src: url('../font/Gudea-Bold-webfont.eot');
    src: url('../font/Gudea-Bold-webfont.eot?#iefix') format('eot'), url('../font/Gudea-Bold-webfont.ttf') format('truetype'), url('../font/Gudea-Bold-webfont.woff') format('woff'), url('../font/Gudea-Bold-webfont.svg') format('svg');
    font-weight: 700;
    font-style: "normal"
}

@font-face {
    font-family: "Gudea";
    src: url('../font/Gudea-Regular-webfont.eot');
    src: url('../font/Gudea-Regular-webfont.eot?#iefix') format('eot'), url('../font/Gudea-Regular-webfont.ttf') format('truetype'), url('../font/Gudea-Regular-webfont.woff') format('woff'), url('../font/Gudea-Regular-webfont.svg') format('svg');
    font-weight: 400;
    font-style: "normal"
}

And when quoting the source put her weight, for example:

body {
    font-family: 'Gudea';
    font-weight: 400;
    font-style: normal;
}

Credit to Gustavo Rodrigues that left the link to Google Fonts containing properly applied example. Thank you!

Browser other questions tagged css css3 css-font-face

You are not signed in. Login or sign up in order to post.