Indexhibit Support

I was trying to look up the steps on how to change the font with the style.css folder.

What I want is to change the default font of my site to Novecento, which I downloaded to my desktop from the web. I'm just not sure what to replace the beginning text with to achieve this font as the main font, nor am I confident with how to edit this:

1. body {
2. font-size: 13px;
3. font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
4. background: #fff;
5. color: #000;
6. line-height: 1.3em;
7. /* font-weight: 300; */
8. }

I just want some assurance on how to edit this code. Thank you and apologies if this question beat a dead horse or is annoying to answer.

Hi stkulper,

first off you are trying to use a font that is specialized (which i'm sure you realize) and needs to be placed onto the server.
not only do you need to place it on the server, but it's advisable that you convert the font to a few specialized webfont formats so that it can be handled appropriately in a variety of browsers.

i would suggest going to this website to make your webfont kit
fontsquirrel.com/tools/…

you upload your font file and it generates a package for you to download.
you then place this in a directory on your server (ex. yoursite.com/ndxzsite/fonts)

and here is a website that explains the @fontface code that you need to put into style.css
font-face.com/

here is an example

1. @font-face {
2.     font-family: 'BentonSans-LightRegular';
3.     src: url('/ndxzsite/site/fonts/benslt_0-webfont.eot');
4.     src: local('BentonSans-LightRegular'), url('/ndxz-studio/site/fonts/benslt_0-webfont.woff') format('woff'), url('/ndxzsite/site/fonts/benslt_0-webfont.ttf') format('truetype'), url('/ndxzsite/site/fonts/benslt_0-webfont.svg#benslt_0-webfont.svg') format('svg');
5.     font-weight: normal;
6.     font-style: normal;
7. }
8. @font-face {
9.     font-family: 'BentonSans';
10.     src: url('/ndxzsite/site/fonts/bentonsm-webfont.eot');
11.     src: local('BentonSans'), url('/ndxzsite/site/fonts/bentonsm-webfont.woff') format('woff'), url('/ndxzsite/site/fonts/bentonsm-webfont.ttf') format('truetype'), url('/ndxzsite/site/fonts/bentonsm-webfont.svg#bentonsm-webfont.svg') format('svg');
12.     font-weight: normal;
13.     font-style: normal;
14. }

once you've added @fontface code to your css you can then write the font name Novecento, into the body font style that you've outlined in your post.

does this make sense?

so then place it into the body style like this

1. body {
2. font-size: 13px;
3. font-family: Novecento;
4. background: #fff;
5. color: #000;
6. line-height: 1.3em;
7. /* font-weight: 300; */
8. }

skulpter.com is my website if you need to see what happened.

I don't have the font i was even looking for as the new font.

What I did was went to my ftp, opened folder ndxzstudio>asset>css>opened style.css to edit in text edit

I pasted the code that correlates to your suggested coding and replaced it with the font I would like (Novecento) to replace the font name you had for me to copy. And the result is what you see at the moment, which is not what i was looking for :/

Tell me the mistakes I made if you wouldn be so kind. Apologies if the answers are (most likely) under my nose due to severe n00bitus

your file path isn't in the @fonface code.
you have to put the path in for it to find the fonts.
l
ook at my sample...

1. @font-face {
2.     font-family: 'BentonSans-LightRegular';
3.     src: url('/ndxzsite/site/fonts/benslt_0-webfont.eot');
4.     src: local('BentonSans-LightRegular'), url('/ndxz-studio/site/fonts/benslt_0-webfont.woff') format('woff'), url('/ndxzsite/site/fonts/benslt_0-webfont.ttf') format('truetype'), url('/ndxzsite/site/fonts/benslt_0-webfont.svg#benslt_0-webfont.svg') format('svg');
5.     font-weight: normal;
6.     font-style: normal;
7. }

look at where it says src:

put the font folder inside the ndxzsite folder and you have to put the path in the code to find the file.
i don't know the exact name of your font file. make sure you type it into the @fontface code exactly as it appears
Novecentowide-Light-webfont.svg
then copy the name into the body style like this Novecentowide-Light-webfont

but correct me if i'm wrong, i think fonts in the .eot format are best.
you should convert the fonts to .eot as well and put it on the server.

notice that my example shows 4 different font file formats. eot, woff, ttf and svg
if a browser prefers one file format, it will choose that one.

the easiest way to discover the exact name of the path where the file is would be to use an ftp application like cyberduck or filezilla (if you're on a pc) and right click on the file and select from the dropdown menu "copy http link".
then copy this path into the @fontface code.
just make sure to remove the redundancy. it will repeat yoursite.com twice

so like this /ndxzsite/fonts/Novecentowide-Light-webfont.eot

does this make sense?

I guess i just need to keep trying and figure it out on my own :/ It's not that you are not being helpful, because you are. I think there's is a place that I am just not getting here when i'm doing this. I might be trying to edit this in the wrong folder or editing the wrong .css, if there is a video too help correct this or a video tutorial on the subject, i think that might help me. I'm just not getting it at all. Pardon my naivety on this topic, once more.

i would encourage googling how to use @fontface
once you read about it, it will become much clearer why you need the different font formats and where to install and how to link to it

it's pretty straightforward. i would say it would only take 15-30 minutes to learn about it

alternatively, there is this page that can explain things, but Novacento is not available.
google.com/fonts/

Well I ended up just sticking to the old fashioned Google web fonts way and kinda took the easy way out :/ bit of a shame that I am a graphic designer full time and didn't get it. I very much appreciate your help, cnitsch. Check it out if you want. Big ups to you!

skulpter.com

Hallo, still fighting with my new web site emmeimmobili.com
and the first coding knoledges:
I 've created web formats with fontsquirrel.com/tools/… as you suggest, I 've puted all in a folder named "fonts" in the /ndxzsite/fonts... it doesnt' work! where I did the wrong way? I'm a beginners on coding so that I've noticed that the are 2 style.css one in the ndxzsite/default/style.css and another one in ndxzstudio/asset/style.css.
Now I would understand where exactly should I put the long code:
(like in our example, obusly wth my font.eot, woff etc...
in whichone ofthe style.css? and in which line exactly?Maybe is my mistake there?

@font-face {
font-family: 'BentonSans-LightRegular';
src: url('/ndxzsite/site/fonts/benslt_0-webfont.eot');
src: local('BentonSans-LightRegular'), url('/ndxz-studio/site/fonts/benslt_0-webfont.woff') format('woff'), url('/ndxzsite/site/fonts/benslt_0-webfont.ttf') format('truetype'), url('/ndxzsite/site/fonts/benslt_0-webfont.svg#benslt_0-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;

better use absolute url's (including your domain name)

thanks for the quicly anwers, but it doesn't work. I have a doubt on how to write the name of the fontin the body:
body {
font-size: 13px;
font-family: quicksand_book;
background: #fff;
color: #000;
line-height: 1.3em;
/* font-weight: 300; */
}

and then add the code below:
@font-face {
font-family: 'quicksandbold';
src: url('emmeimmobili.com/ndxzsite/fonts/…');
src: url('emmeimmobili.com/ndxzsite/fonts/…') format('embedded-opentype'),
url('emmeimmobili.com/ndxzsite/fonts/…') format('woff'),
url('emmeimmobili.com/ndxzsite/fonts/…') format('truetype');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksandbook';
src: url('emmeimmobili.com/ndxzsite/fonts/…');
src: url('emmeimmobili.com/ndxzsite/fonts/…') format('embedded-opentype'),
url('emmeimmobili.com/ndxzsite/fonts/…') format('woff'),
url('emmeimmobili.com/ndxzsite/fonts/…') format('truetype');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksandlight';
src: url('emmeimmobili.com/ndxzsite/fonts/…');
src: url('emmeimmobili.com/ndxzsite/fonts/…') format('embedded-opentype'),
url('emmeimmobili.com/ndxzsite/fonts/…') format('woff'),
url('emmeimmobili.com/ndxzsite/fonts/…') format('truetype');
font-weight: normal;
font-style: normal;

}

thanks a lot again!
ciao

- Disable the Indexhibit style plugin as it overrides your style.css file and work your css changes directly to your style.css

- Your urls are not correct. Include http : //www

- last but not least include the @font-face before setting them in your body text
You will need to set up which css selectors are going to use Light, which ones Book and which ones Bold.