Problems with @ font-face of the same family

Question

Problems with @ font-face of the same family

Navigation

#1 by (5 votes)

5

I'm having a problem with CSS3's Font module.

I have a font with 3 types: bold, normal and italic and I inserted them in CSS with the same name but with font-weight and style attributes for each type. The problem is that in some browsers (Firefox and iOS Safari) they do not read the different fonts (bold and italic), considering only the default. The firefox even tries to "simulate a bold" by the original source, but it sucks.

I would like to know if anyone can help me with this without using different fonts for each type, for example: GudeaBold, GudeaItalic.

Below is 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

asked by anonymous 24.02.2014 / 18:24

1 answer

Error importing CSV to phpMyAdmin How do I apply a Loading effect before loading the page?

score 5 · Answer 1

To fix the problem was simple.
When the font weight is not specified, the browser tries to simulate it, so it generated fonts of different sizes. What I did was instead of putting bold the weight of their source. It would look like this:

@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 at the time of citing the source put the weight of it, for example:

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

Credit to Gustavo Rodrigues that left the Google Fonts containing example correctly applied. Thanks!