When you download a font you will always find four different files. Each of these files are differentiated by their weight and style i.e., normal, bold, italic and bold-italic.
You would usually use them this way:
font-family: "PT-sans-bold-italic";
src: url("fonts/PT-sans-bold-italic.ttf");
}
@font-face {
font-family: "PT-sans-bold";
src: url("fonts/PT-sans-bold.ttf");
}
@font-face {
font-family: "PT-sans-italic";
src: url("fonts/PT-sans-italic.ttf");
}
@font-face {
font-family: "PT-sans-normal";
src: url("fonts/PT-sans-normal.ttf");
}
body {
font-family: "PT-sans-normal", Fallback, sans-serif;
}
b, strong
{
font-family: "PT-sans-bold", Fallback, sans-serif;
}
i, em
{
font-family: "PT-sans-italic", Fallback, sans-serif;
}
b i, i b, em strong, strong em, b em, em b, i strong, strong i
{
font-family: "PT-sans-bold-italic", Fallback, sans-serif;
}
Here you can see that the bolded text is actually bolded twice and italic text is actually slanted twice. Thats because brower don’t know we are already using bold and italic styled fonts for bold and italic tags respectively.
Instead we need to use this
font-family: "PT-sans";
src: url("fonts/PT-sans-bold.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "PT-sans";
src: url("fonts/PT-sans-italic.ttf");
font-weight: normal;
font-style: italic, oblique;
}
@font-face {
font-family: "PT-sans";
src: url("fonts/PT-sans-normal.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PT-sans";
src: url("fonts/PT-sans-bold-italic.ttf");
font-weight: bold;
font-style: italic;
}
body {
font-family: "PT-sans", Fallback, sans-serif;
}
Now you can see that browser doesn’t over style bold and italic tags. Thats because we loaded all font files with same font-family name and we leave it upto the browser to decide the correct file to use based on font-weight and font-style configuration. For example: when we use <b> with PT-sans font-family browser will use its(<b> tag) font-weight and font-style to match the correct file, in this case PT-sans-bold.ttf.
@narayanprusty
Leave a Reply