Adobe Community: Installing Webfonts

Currently Being Moderated

1. osgood_,

Jul 24, 2012 2:27 AM in reply to Renskins

Report

You have a css selector mixed up in the link to your stylesheet:

This:

Should be this:

And this:

p { font-family: 'MyWebFont', SecondaMediumRegular; }

Should be:

p { font-family: SecondaMediumRegular, arial, verdana, sans serif; }

Also have you uploaded your font files into your web directory where the path to them says they should be: src: url('Seconda-Medium-webfont.eot');

@font-face {

font-family: 'SecondaMediumRegular';

src: url('Seconda-Medium-webfont.eot');

src: url('Seconda-Medium-webfont.eot?#iefix') format('embedded-opentype'),

url('Seconda-Medium-webfont.woff') format('woff'),

url('Seconda-Medium-webfont.ttf') format('truetype'),

url('Seconda-Medium-webfont.svg#SecondaMediumRegular') format('svg');

font-weight: normal;

font-style: normal;

}

</style>

|

Mark as:

Currently Being Moderated

2. Renskins,

Jul 24, 2012 2:33 AM in reply to osgood_

Report

Thanks

where does this go?

p { font-family: SecondaMediumRegular, arial, verdana, sans serif; }

and I don't understand what you mean by this?

Also have you uploaded your font files into your web directory where the path to them says they should be: src: url('Seconda-Medium-webfont.eot');

sorry i'm a learner...(I have put the webfonts folder in the same directory as everything else for the website, html pages etc.

|

Mark as:

Currently Being Moderated

3. osgood_,

Jul 24, 2012 2:41 AM in reply to Renskins

Report

Renskins wrote:

Thanks

where does this go?

p { font-family: SecondaMediumRegular, arial, verdana, sans serif; }

In your linked css file - stylesheet.css.

Renskins wrote:

sorry i'm a learner...(I have put the webfonts folder in the same directory as everything else for the website, html pages etc.

What is the name of your webfonts folder?

You will have to include the name of the folder in the url path where your .eot, .woff, .ttf and .svg file reside.

So if the webfonts folder name is 'Seconda':

@font-face {

font-family: 'SecondaMediumRegular';

src: url('Seconda/Seconda-Medium-webfont.eot');

src: url('Seconda/Seconda-Medium-webfont.eot?#iefix') format('embedded-opentype'),

url('Seconda/Seconda-Medium-webfont.woff') format('woff'),

url('Seconda/Seconda-Medium-webfont.ttf') format('truetype'),

url('Seconda/Seconda-Medium-webfont.svg#SecondaMediumRegular') format('svg');

font-weight: normal;

font-style: normal;

}

|

Mark as:

Currently Being Moderated

4. Renskins,

Jul 24, 2012 2:50 AM in reply to osgood_

Report

osgood_ wrote:

Renskins wrote:

Thanks

where does this go?

p { font-family: SecondaMediumRegular, arial, verdana, sans serif; }

In your linked css file - stylesheet.css.

So where I had it before?

It's still not working.

I have this now:

@font-face {

font-family: 'SecondaMediumRegular';

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot');

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot?#ief ix') format('embedded-opentype'),

url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.woff') format('woff'),

url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.ttf') format('truetype'),

url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.svg#Seco ndaMediumRegular') format('svg');

font-weight: normal;

font-style: normal;

}

body {

#text { position:absolute;

left:10px; top:10px;

width:300px;

height:30px;

z-index:1;

font-family:SecondaMediumRegular;

font-size:12px;

font-weight:bold;

color:#a76d2f;

line-height:140%;

word-spacing:1px;

}

|

Mark as:

Currently Being Moderated

5. osgood_,

Jul 24, 2012 3:01 AM in reply to Renskins

Report

What happens if you copy ALL the code below paste it into a new Dreamweaver document save it to your site folder and then view it in a browser?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

@font-face {

font-family: 'SecondaMediumRegular';

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot');

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot?#ief ix') format('embedded-opentype');

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.woff') format('woff');

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.ttf') format('truetype');

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.svg#Seco ndaMediumRegular') format('svg');

font-weight: normal;

font-style: normal;

}

#text { position:absolute;

left:10px; top:10px;

width:300px;

z-index:1;

font-family:SecondaMediumRegular;

font-size:12px;

font-weight:bold;

color:#a76d2f;

line-height:140%;

word-spacing:1px;

}

</style>

</head>

<body>

</body>

</html>

|

Mark as:

Currently Being Moderated

6. Renskins,

Jul 24, 2012 3:13 AM in reply to osgood_

Report

It is using the default font, times new roman

|

Mark as:

Currently Being Moderated

7. Renskins,

Jul 24, 2012 3:14 AM in reply to Renskins

Report

I even added another line of text but in times to compare them and it definitely is times not seconda

|

Mark as:

Currently Being Moderated

8. osgood_,

Jul 24, 2012 4:39 AM in reply to osgood_

Report

Can you give it one more go using the code below:

IF your font files are in the folder named 'seconda_medium_macroman' which is in the folder named 'webfonts' and the 'webfonts' folder is directly sitting in your site folder the below will work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<style>

@font-face {

font-family: 'SecondaMediumRegular';

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot');

src: url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.eot?#ief ix') format('embedded-opentype'),

url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.woff') format('woff'),

url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.ttf') format('truetype'),

url('webfonts/seconda_medium_macroman/Seconda-Medium-webfont.svg#Seco ndaMediumRegular') format('svg');

font-weight: normal;

font-style: normal;

}

h1 {

font-family: SecondaMediumRegular;

font-size: 50px;

color:#36C;

}

</style>

</head>

<body>

</body>

</html>

|

Mark as:

Currently Being Moderated

9. Rik Ramsay,

Jul 24, 2012 8:11 AM in reply to osgood_

Report

If the location and everything is correct as osgood_ has mentioned but it's still not working, try adding quotes around the font name in the styles - this is standard practice when linking to a non-standard web font.

h1 {

font-family: "SecondaMediumRegular";

font-size: 50px;

color:#36C;

}

|

Mark as:

Currently Being Moderated

10. MurraySummers,

Jul 24, 2012 8:16 AM in reply to Rik Ramsay

Report

I believe the only time a font family name requires quotes is when there are spaces, and that would be for standard as well as non-standard ones, e.g.,

"Times New Roman" vs verdana

|

Mark as:

Currently Being Moderated

11. Renskins,

Jul 25, 2012 10:08 PM in reply to Rik Ramsay

Report

Didn't work, it's still using times as the default. I used your exact code in a fresh html file. I checked the folder names and it's all correct.

no idea why it won't work.

Is there some way of setting your default font?

for instance, i actually want to use skia, but skia is only compatible with macs, unless I bought the webfont of the net for $40, which I don't want to do. is there anyway I can set the font to skia and then make the default one of the free webfonts I have downloaded so that mac users will see the original design but non-mac users will see something slightly different but similar?

|

Mark as:

Currently Being Moderated

12. Renskins,

Jul 25, 2012 10:13 PM in reply to Renskins

Report

fix the problem, there was a space between web and fonts in the name of the webfonts folder.

Still would love to hear your answer to the above question though.

I also noticed in your code above that you haven't linked the webfont seconda to your stylesheet, is there any reason? do i still need to do that?

|

Mark as:

Currently Being Moderated

13. osgood_,

Jul 25, 2012 11:44 PM in reply to Renskins

Report

Renskins wrote:

for instance, i actually want to use skia, but skia is only compatible with macs, unless I bought the webfont of the net for $40, which I don't want to do. is there anyway I can set the font to skia and then make the default one of the free webfonts I have downloaded so that mac users will see the original design but non-mac users will see something slightly different but similar?

Sure, I don't know what Skia is and I dont think I have it on my Mac, maybe, but I'm unaware of it.

If you want Skia to be the default option then set it first in the font-family list:

#text { position:absolute;

left:10px; top:10px;

width:300px;

z-index:1;

font-family: skia, SecondaMediumRegular;

font-size:12px;

font-weight:bold;

color:#a76d2f;

line-height:140%;

word-spacing:1px;

}

Those users without Skia will see SecondaMediumRegular

|

Mark as:

Dreamweaver

Installing Webfonts

Jul 24, 2012 2:03 AM

More Like This

Bookmarked By (0)

Answers + Points = Status