asked on

Define Multiple fonts

Hi there, I have some code to define/use a font (from a file), however I want use multiple.

current code:

<html>
<head>
<style>
@font-face {
	font-family: "Futura BT";
	font-style: normal;
	font-weight: 400;
	src: url("ufonts.com_futura-md-bt-medium.woff");
}
p {
    font-family: "Futura BT";
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Open in new window

What I want to do is add more fonts from files, every time I add another (copying the existing code) all fonts default to Times Roman New.

Help?

Ryan Chong

something like this?

<html>
<head>
    <style>
        @font-face {
            font-family: "Futura BT";
            font-style: normal;
            font-weight: 400;
            src: url("ufonts.com_futura-md-bt-medium.woff");
        }
        @font-face {
            font-family: "Times Roman New";
            font-style: normal;
            font-weight: 400;
        }
        p {
            font-family: "Futura BT";
        }
        h1 {
            font-family: "Times Roman New";
        }
    </style>
</head>
<body>
    <p>Hello World</p>
    <h1>Hello World</h1>
</body>
</html>

Open in new window

Graeme McGilvray

ASKER

more so like:

<html>
<head>
    <style>
        @font-face {
            font-family: "Futura BT";
            font-style: normal;
            font-weight: 400;
            src: url("ufonts.com_futura-md-bt-medium.woff");
        }
        @font-face {
            font-family: "Aleo-Regular";
            font-style: normal;
            font-weight: 400;
            src: url("Aleo-Regular.otf");
        }
        p {
            font-family: "Futura BT";
        }
        h1 {
            font-family: "Aleo";
        }
    </style>
</head>
<body>
    <p>Hello World</p>
    <h1>Hello World</h1>
</body>
</html>

Open in new window

Graeme McGilvray

ASKER

But what it does, it defaults all fonts to Times Roman New, not to what I have specified

Ryan Chong

do you have ufonts.com_futura-md-bt-medium.woff and Aleo-Regular.otf placed available in your web server?

Graeme McGilvray

ASKER

yes i do

Ryan Chong

h1 {
            font-family: "Aleo";
        }

Open in new window

should be coded as:

h1 {
            font-family: "Aleo-Regular";
        }

Open in new window

Ryan Chong

for ufonts.com_futura-md-bt-medium.woff, you may try:

src: url("ufonts.com_futura-md-bt-medium.woff") format("woff");

Open in new window

ASKER CERTIFIED SOLUTION

Ryan Chong

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

ufonts.com_futura-md-bt-medium.woff is not a legitimate URL. And as best I can tell, Futura is not available as a free font.

Graeme McGilvray

ASKER

Hi Ryan, works now, not sure why, but does, cheers

Hi Dave, correct not a free font, I have the file itself - ufonts.com_futura-md-bt-medium.woff - its a full file name