通过font face在css中导入字体

Question

font is not working

here is CSS code

@font-face {
  font-family: 'Soolidium', sans-serif;
  font-style: normal;
  src:url(http://localhost/changingCinema/font/Soolidium.ttf) format('truetype');
}

heading
        {
            float:left;
            width:100%;
            margin-bottom:10px;
            font-size:54px;
            font-family: 'Soolidium', sans-serif;}

this is HTML

<heading>My heading</heading>

only working when I install this font in my window otherwise not.

Help me plz fast thank you.

Answer 1

In Font face set font family name

@font-face {
  font-family: 'Soolidium';
  font-style: normal;
  src: url('http://localhost/changingCinema/font/Soolidium.ttf') format('truetype'); 
  }

For all browser support you have to give url from different font file. (.eot/.woff/.ttf/.svg)

Answer 2

First of all make sure you put your @font-face before any other styles.

If possible you might also need to add additional rules for browser support like this:

@font-face {
    font-family: 'Soolidium', sans-serif;
    src: url('Soolidium.woff2') format('woff2'),
    url('Soolidium.woff') format('woff'),
    url('Soolidium.ttf') format('truetype');
}

And as always check for spelling errors or pointing to the wrong path. Remember you are calling this from your CSS file so you need to point relatively to the font folder.

Answer 3

Try replacing:

src:url(http://localhost/changingCinema/font/Soolidium.ttf) format('truetype');

with:

src: url('../font/Soolidium.ttf');

Assuming you have a folder named 'font' in your root directory with the font 'Soolidium.ttf' in.