CODEWITHSUNDEEP
htmlcss
user8210258
user8210258

Reputation:

CSS Font styles not working

I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:

CSS

.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
    font-weight:700;
    letter-spacing:14em;
    line-height:1em;
    color:#333;
    font-style:normal;
    font-size:120px;
}

HTML

<h1 class="header">Welcome</h1>

Upvotes: 0

Views: 5194

Answers (1)

domsson
domsson

Reputation: 4681

There are three issues here:

  1. Only the first letter "W", of your heading "Welcome" is showing.
  2. The font(s) you specified are not showing.
  3. You want to use Futura, but it isn't available for free.

The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.

The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, @import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.

The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.

Putting that together:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1em;
  color: #333;
  font-style: normal;
  font-size: 120px;
  text-transform: uppercase;
}
<h1 class="header">Welcome</h1>

Also note that you did not copy the text-transform: uppercase rule, which I added here.

Upvotes: 1

Related Questions