12 replies [Last post]
Mend
Mend's picture
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Hello everyone.

I'm relatively new to HTML and CSS so please go easy on me. I'm trying to build a website. Rather than building from scratch I figured I'd be better off buying a template website (this one: http://themeforest.net/item/minimo-a-minimal-one-page-portfolio-theme/49798) and modify it's content to my own needs. Everything went okay until I figured I could use a custom font. The template already uses it's own stylesheet and I have a feeling this is the source of my problem. In this stylesheet is a reference to another sheet (text.css). Within text.css I found this:

/* =Basic HTML
--------------------------------------------------------------------------------*/
*{margin:0;padding:0;}
body{font:11px/1.5 "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;}
p{ margin-bottom:20px;}
p a{display:inline;}
em{color:#404a47;font-weight:normal;font-style:normal;line-height:0px;}
My @fontface kit uses it's own sheet with references to my own custom font. Ultimately, only the font used in text.css shows up. Deleting text.css still does not bring up my custom font. What might be the problem here? Please help. Getting kind of desperate.

PS: the offline demo html works just fine.
PS2: I'm off to bed for now, I'll reply back tomorrow.
PS3: Yes I've removed everything related to sifr Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 48 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to copy the code

You need to copy the code from your @fontface stylesheet into text.css.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mend
Mend's picture
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Tyssen wrote: You need to

Tyssen wrote:

You need to copy the code from your @fontface stylesheet into text.css.

Where do I put it?

/* =Basic HTML
--------------------------------------------------------------------------------*/
*{margin:0;padding:0;}
body{font:11px/1.5 "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;}
p{ margin-bottom:20px;}
p a{display:inline;}
em{color:#404a47;font-weight:normal;font-style:normal;line-height:0px;}
/* =Headings
--------------------------------------------------------------------------------*/
h1{color:#404a47;font-size:48px;}
h2{color:#404a47;font-size:14px;}
h3{font-weight:bold;font-size:18px;font-size:11px;}
h4{font-size:11px;}
h5{font-size:10px;}
h6{font-size:8px;}
/* =Spacing
--------------------------------------------------------------------------------*/
dl,
hr,
h1,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset{margin-bottom:10px;}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 48 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Can you show the @fontface

Can you show the @fontface code too? Which elements should it be applied to?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mend
Mend's picture
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Tyssen wrote:Can you show

Tyssen wrote:

Can you show the @fontface code too? Which elements should it be applied to?

I'm at work right now but I'll post it when I get home.

Mend
Mend's picture
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Here it is: /* Generated by

Here it is:

/* Generated by Font Squirrel (<a href="http://www.fontsquirrel.com" rel="nofollow">http://www.fontsquirrel.com</a>) on February 21, 2011 */
 
 
 
@font-face {
	font-family: 'ITCAvantGardeGothicStdMedium';
	src: url('css/itcavantgardestd-md-webfont.eot?') format('eot'), 
	     url('css/itcavantgardestd-md-webfont.woff') format('woff'), 
	     url('css/itcavantgardestd-md-webfont.ttf')  format('truetype'),
	     url('css/itcavantgardestd-md-webfont.svg#webfont3M0nnsUZ') format('svg');
	}
Yes, the fonts are located in the css folder.

I would like to apply the @font-face to all body text.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

From the look of the license

From the look of the license for that font I would be wary about putting it online.

Quote:

2.3 Server Use. You may install one copy of the Software on one Computer file server within your Internal Network for the purpose of using the Software through commands, data or instructions (e.g., scripts) from another Computer within the same Internal Network, provided that the total number of users (not the concurrent number of users) that are permitted to use the Software on such Computer file server does not exceed the Permitted Number. No other network use is permitted, including, but not limited to use of the Software, either directly or through commands, data or instructions, from or to a Computer not part of your Internal Network, for Internet or web hosting services or by any user not licensed to use this copy of the Software under a valid license from Adobe;

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Mend
Mend's picture
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Deuce wrote: From the look of

Deuce wrote:

From the look of the license for that font I would be wary about putting it online.

Quote:

2.3 Server Use. You may install one copy of the Software on one Computer file server within your Internal Network for the purpose of using the Software through commands, data or instructions (e.g., scripts) from another Computer within the same Internal Network, provided that the total number of users (not the concurrent number of users) that are permitted to use the Software on such Computer file server does not exceed the Permitted Number. No other network use is permitted, including, but not limited to use of the Software, either directly or through commands, data or instructions, from or to a Computer not part of your Internal Network, for Internet or web hosting services or by any user not licensed to use this copy of the Software under a valid license from Adobe;

Yeah I figured that. I'll replace it with one of Fontsquirrel's free fonts. Thanks for the heads up.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 48 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Paste the Font Squirrel code

Paste the Font Squirrel code at the top of text.css and then for any element that it should be applied to it'll be (for example):
h1 { font-family: ITCAvantGardeGothicStdMedium, "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mend
Mend's picture
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Tyssen wrote: Paste the Font

Tyssen wrote:

Paste the Font Squirrel code at the top of text.css and then for any element that it should be applied to it'll be (for example):
h1 { font-family: ITCAvantGardeGothicStdMedium, "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;}

Why does "Lucida Sans","Lucida Sans Unicode","Lucida Grande" still have to be there? Are they basically back up fonts in case my font isn't working for some reason?

One other thing. How do I change the custom font's size and spacing? I know the properties, but when I place them in the body it ends up looking like this and it's not working:

/* Generated by Font Squirrel (<a href="http://www.fontsquirrel.com" rel="nofollow">http://www.fontsquirrel.com</a>) on February 21, 2011 */
 
@font-face {
	font-family: 'ITCAvantGardeGothicStdMedium';
	src: url('css/itcavantgardestd-md-webfont.eot?') format('eot'), 
	     url('css/itcavantgardestd-md-webfont.woff') format('woff'), 
	     url('css/itcavantgardestd-md-webfont.ttf')  format('truetype'),
	     url('css/itcavantgardestd-md-webfont.svg#webfont3M0nnsUZ') format('svg');
	}
 
/* =Basic HTML
--------------------------------------------------------------------------------*/
*{margin:0;padding:0;}
body{font-size:12px/1.5 font-family: ITCAvantGardeGothicStdMedium, "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;}
p{ margin-bottom:20px;}
p a{display:inline;}
em{color:#404a47;font-weight:normal;font-style:normal;line-height:0px;}
/* =Headings
--------------------------------------------------------------------------------*/
h1{color:#404a47;font-size:48px;}
h2{color:#404a47;font-size:14px;}
h3{font-weight:bold;font-size:18px;font-size:11px;}
h4{font-size:11px;}
h5{font-size:10px;}
h6{font-size:8px;}
/* =Spacing
--------------------------------------------------------------------------------*/
dl,
hr,
h1,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset{margin-bottom:10px;}
What am I doing wrong?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 48 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Mend wrote: Why does "Lucida

Mend wrote:

Why does "Lucida Sans","Lucida Sans Unicode","Lucida Grande" still have to be there? Are they basically back up fonts in case my font isn't working for some reason?

Yes.

Change you code to:

body{font: 12px/1.5 ITCAvantGardeGothicStdMedium, "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif;}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mend
Mend's picture
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Tyssen wrote: Mend

Thanks! Quite happy with the body text now. But now the headers seem to have changed to. Do I need to alter this code to change the line-height again? The lines of text in the header seem to have changed.

Here's what it looks like right now:

h1{color:#ffffff;font-size:50px;}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 48 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If you don't want your hx

If you don't want your hx tags to have a line-height of 1.5 you'll have to specify it, e.g. h1 { line-height: ??? }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference