CODEWITHSUNDEEP
csssass
user3541631
user3541631

Reputation: 4008

Font issues - not taking in consideration the weight and line-height issues

I want to use a custom font, so I added the cod below:

I verified the fonts path and is correct.

The font weight is ignored. If I ad another font to the familly, as Arial until it loads, it just takes only Arial.

1.

@font-face {
  font-family: Gop;
  src: url("../fonts/gop/normal/gop.eot");
  src: url("../fonts/gop/normal/gop.eot?#iefix") format("embedded-opentype"), url("../fonts/gop/normal/gop.woff") format("woff"), url("../fonts/gop/normal/gop.ttf") format("truetype"), url("../fonts/gop/normal/gop.svg#gop") format("svg");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: gop;
  src: url("../fonts/gop/bold/gop.eot");
  src: url("../fonts/gop/bold/gop.eot?#iefix") format("embedded-opentype"), url("../fonts/gop/bold/gop.woff") format("woff"), url("../fonts/gop/bold/gop.ttf") format("truetype"), url("../fonts/gop/bold/gop.svg#gop") format("svg");
  font-style: normal;
  font-weight: 700; }


h1 {
font: 700 1.875rem Gop;
}

p{
font: 400 1.875rem Gop;

}

  1. If in reset I have:

html * { line-height: 1.15 }

and later:

h1 { line-height: 1.5 }

The line-height for h1 is ignored.

Upvotes: 0

Views: 52

Answers (1)

emmzee
emmzee

Reputation: 640

1) Your "font:" lines are formatted slightly off, try adding "normal" in front:

font: normal 700 1.875rem Gop;

Single-line font shorthand reference (order matters): https://css-tricks.com/snippets/css/font-shorthand/

Generally speaking, separating font declaration into separate lines is better, ex:

font-family: Gop;
font-weight: 700;
font-size: 1.875rem;

This is a bit longer but easier to work out problems. Which leads to the second issue ...

2) You need to specify ALL of the attributes when using a CSS shorthand, otherwise they will go back to the defaults.

Info about this here: https://css-tricks.com/accidental-css-resets/

So you would need to include the line-height in your font:

font: normal 700 1.875rem/1.5 Gop;

This isn't an issue if you separate it into separate lines, with font-family, font-weight, etc.

Upvotes: 1

Related Questions