6

I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:

@font-face
{
    font-family: myFirstFont;
    src: url('ellis.ttf');
}

body
{
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: default;
    font-size: 11px;
    line-height: 1;
    font-family: myFirstFont,arial,san-serif;
    overflow:auto;
    background:#ecf6f7;
}

I know this is not a cross browser case, but I am trying to make work a simple case at first.

4
  • 1
    Are you sure the path to your font is correct? Commented May 29, 2012 at 8:42
  • on the body font-family try just calling: font-family: "myFirstFont"; Commented May 29, 2012 at 8:46
  • Yes I am shure and I have already tried it Commented May 29, 2012 at 8:51
  • I have a similar problem now in Chrome (Safari is rendering the font as expected). When I look at the resources tab in Chrome developer tools, I can see an entry for the font, but clicking on it shows a preview that looks like Times New Roman. Commented Nov 19, 2013 at 21:59

5 Answers 5

6

add format("opentype"); after URL

Sign up to request clarification or add additional context in comments.

1 Comment

Sorry, but the OP has specified a .ttf so the fromat should be format(truetype). Modern browsers usually don't need the format.
2

Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.

If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.

3 Comments

my css file and ttf file are in the same folder.
The only explanation I can otherwise provide then is that either you're using an outdated browser (which I doubt), or the .ttf file is corrupt or improperly uploaded.
The font was carrupted. I have tried some other fonts before but I guess they were also corrupted. Thanks for help
2

apply font like this..

@font-face
{
    font-family: 'ellis';
    src: url('ellis.ttf');
}
.body
{
    font-family: "ellis";
}

4 Comments

font-family and font name should be same...in your case your are using font family myFirstFont and font name ellis.ttf
Do that in the post. Code-only answers are discouraged and you're likely to get downvoted.
it's my openion i am not 100% sure on this answer. because i have use same code in my project and it's working 100%.
That's not correct. It doesn't matter if the font-family name differs from the font-file name (google fonts wouldn't work at all with their rather cryptic file names).
0

on both the font-family declarations add speech marks.

so add to both @font-face and body:

font-family: "myFirstFont";

Or alternatively try this to make sure all code is correct and to make sure its not the code:

http://www.fontsquirrel.com/fontface/generator

It also may sound stupid, but make sure all spellings of fonts and paths are correct.

5 Comments

This shouldn't be necessary: css3.info/preview/web-fonts-with-font-face Although it does seem more logical!
Adding marks did nothing. I have already tried fontsquirrel service. It does not work.
Well if font-squirrel didnt work then its unlikely to be the code, but rather something else, maybe path or font issue directly
I have tried the font file form angelinagasparyan.am/www. It is working there but does not work on my localhost. css and ttf files are in the same folder. So I am prity shure there is no mistake with font file path
Quotes are only required for font-family names that include whitespace - for instance "Open Sans".
0

Just in case) If @font-face is declared in another file, then make sure that you import it into the one where body

2 Comments

That's not correct. You can load fonts from any CSS location as long as the specified font file URL is correct.
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.