Using Font Faces - Your own font

Question

I'm trying to add my own font to my website I have checked out quite a few stackoverflow articles many seem to be browser specific or path issues. I cant seem to get my font to display on any browser, anyone know what's up?

@font-face {
font-family: "Helvetica";
src: url('http://spawnasite.co.uk/Helvetica-Condensed-Light-Light.ttf') format("truetype");
}

h1{
text-align: center;
text-transform:uppercase;
color:#232323;
font-size: 24px;
font-family: "Helvetica", sans-serif;
}

Js Fiddle here http://jsfiddle.net/Gz26Q/

Just a hunch, but Helvetica is likely already a standard font on most systems...I assume it's just grabbing the locally installed font in that situation. What if you use your own name other than "helvetica" — DA., Sep 12 '13 at 17:50
Just gave that ago giving it my own name, still nothing showing up just stays as sans-serif default look. Thanks — user2598957, Sep 12 '13 at 17:52
I'm guessing that your problem is in the ttf somehow. Look here: http://jsfiddle.net/Gz26Q/3/ — Eric Hotinger, Sep 12 '13 at 17:58
Could you please update your example to not use only 'Helvetica' as the example? It makes your question needlessly more confusing. If anything, call it something like 'MyHelvetica'. — David Bradbury, Sep 12 '13 at 18:07
Have you tried specifying the path to the ttf file relatively? — kontur, Sep 12 '13 at 18:11
It seems ok to me now. If Helvetica wouldn't working, font would be a Times New Roman (I'm in Chrome): http://jsfiddle.net/RgeeL/. — Andre Figueiredo, Sep 12 '13 at 18:39

score 0 · Answer 1 · answered Sep 12 '13 at 18:08

0

You are trying to override an existing font, call it myHelvetica
Use others formats: eot, wot.

See these links:

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

http://caniuse.com/ttf

answered Sep 12 '13 at 18:08

Andre Figueiredo

12,930
8
48
74

This doesn't solve his problem... TTF is supported in chrome and this doesn't help. If anything, it's because the Helvetica font he's referencing is likely protected.. – Eric Hotinger Sep 12 '13 at 18:09
1

the format is okay, but the name changing should probably solve his problem – imbask Sep 12 '13 at 18:09
as I stated in item (2), using other formats also in declaration 'should' solve problem. Will be need a converter. see the link I provided and this StackOverflow same question: http://stackoverflow.com/questions/16742194/trouble-with-font-face-and-ttf-file?rq=1 – Andre Figueiredo Sep 12 '13 at 18:13

score 0 · Accepted Answer · edited May 23 '17 at 12:15

My guess here is that the font you're referencing is protected.

Not all font foundries, especially one like Helvetica, allow their fonts to be embedded. They have code within the font to prevent this.

You could still use the font on your computer, but not embed it within another application or document that doesn't have the font installed.

As a reminder from what has been mentioned before:

Change the name of your custom font-family from "Helvetica" to something else in order to avoid overriding default naming conventions.
Use multiple types of fonts for backups.

Additionally,

I highly recommend looking at FontSquirrel -- some fonts even have their own webfont kit pre-made for you to use out of the box.
If you try to load fonts in Chrome and want better rendering -- be sure to put the SVG on the top of the declaration. See here for more information.

score 0 · Answer 3 · answered Sep 12 '13 at 20:14

0

The basic problem is very simple: the URL of the font resource is wrong. An attempt to fetch http://spawnasite.co.uk/Helvetica-Condensed-Light-Light.ttf results in 404 Not Found.

answered Sep 12 '13 at 20:14

Jukka K. Korpela

195,524
37
270
390

Using Font Faces - Your own font

3 Answers3