import font in css through font face

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.

i cant check in src:url its not showing anything rather than url — Rajnish Rajput, Oct 01 '15 at 10:44
You need to generate all the other fonts: .eot, .woff, etc. have a look at the font squirrel generator. Also this question has been asked millions of times — Pete, Oct 01 '15 at 10:44
Possible duplicate of [@font-face not working for my ttf font in all browsers](http://stackoverflow.com/questions/17234768/font-face-not-working-for-my-ttf-font-in-all-browsers) — Pete, Oct 01 '15 at 10:46
ttf is supported on modern browsers. http://caniuse.com/#feat=ttf — orlland, Oct 01 '15 at 10:49
Can you try to get http://localhost/changingCinema/font/Soolidium.ttf directly from the browser? — orlland, Oct 01 '15 at 10:49
What do you mean not working? You can't accessed the font directly? — orlland, Oct 01 '15 at 10:56
@Orland, ttf only doesn't seem to work in ie11 but I haven't checked in edge, although it does work in ff and chrome, perhaps just include the eot version for crappy ie then? — Pete, Oct 01 '15 at 10:58
@Orland i can access its shows to save file and its mean that the URL is write dont ask me stupid questions if you have solution so tell me. ok im not new in web development. — Rajnish Rajput, Oct 01 '15 at 10:59
@RajnishRajput We don't have a clear picture of your setup, so how come that those are stupid questions? You're so rude. Why don't you upload everything so that we can reproduce it on our machines and that way we'll be able to help. — orlland, Oct 01 '15 at 11:01

Lemon Kazi · Answer 1 · 2015-10-01T10:57:13.010

0

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)

edited Oct 01 '15 at 10:57

answered Oct 01 '15 at 10:46

Lemon Kazi

3,308
2
37
67

Which browser are you using? – Lemon Kazi Oct 01 '15 at 10:51

score 0 · Answer 2 · answered Oct 01 '15 at 10:58

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.

score -2 · Answer 3 · answered Oct 01 '15 at 10:42

-2

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.

answered Oct 01 '15 at 10:42

Danny Barber

190
2
15

1

how could you come up with that given that you don't know the file structure yet? – orlland Oct 01 '15 at 10:43
How are your files set up? – Danny Barber Oct 01 '15 at 10:47
what you are looking for – Rajnish Rajput Oct 01 '15 at 10:49
http://www.fontsquirrel.com/tools/webfont-generator Try this and generate all the other fonts then use the css code that it uses. And set up the file system the same – Danny Barber Oct 01 '15 at 10:50

import font in css through font face

3 Answers3