CODEWITHSUNDEEP
css
Mustakeem
Mustakeem

Reputation: 13

how to import font in webpage

here is my code I had added font face but it is not applying 

@font-face {
  font-family: 'MyWebFont';
  src: url('KellySlab.ttf') format('truetype');
   }
body, h1, h4, form,footer{font family: 'MyWebFont',sans-serif;}

Upvotes: 0

Views: 125

Answers (2)

Syden
Syden

Reputation: 8625

The issue is you are only loading a .ttf file, more formats are suggested for it to work on most browsers (like woff, woff2).

Considering your case though:

  • I'd suggest you take advantage of google's CDN for that font family.
  • You will avoid having to deal with extra font extensions.

See below:

body {
  font-family: 'Kelly Slab', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Kelly+Slab" rel="stylesheet">
<span>Testing Kelly Slab font-family</span>

If you want to load it locally no matter what:

Go to font-squirrel.com, search for Kelly Slab and download the .otf file clicking here:

enter image description here

Once downloaded, upload your .otf file to the generator and download the generated web font kit which includes woff & woff2.

To load them:

@font-face {
  font-family: 'MyWebFont';
  src:  url('kellyslab-regular-webfont.woff2') format('woff2'),
        url('kellyslab-regular-webfont.woff') format('woff');
}

To use it:

selector {
  font-family: 'MyWebFont', sans-serif;
}

Upvotes: 1

Kevincore
Kevincore

Reputation: 504

Here is a great link that gives you more insight on the matter with really good examples CSS-tricks

The @font-face rule should be added to the stylesheet before any styles.

    @font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Then use it to style elements like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Upvotes: 2

Related Questions