[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 575
  • Last Modified:

Funky Font in Nav Bar

Client wants me to use a funky font (zapfino) in the nav bar.  I would prefer to use css in the navigation but with this font being so unique, am I stuck making images for the buttons?  Here is the layout.  Please advise.

http://nsitedesigns.com/nsitedesigns/focus/layout3.html
0
nsitedesigns
Asked:
nsitedesigns
  • 5
  • 4
  • 2
3 Solutions
 
LZ1Commented:
You could use @font-face in your CSS. Just make sure the font is ok for production licensing and then use Font-Squirrel's font generator.

It comes with documentation to get you started.

If not you could maybe try Cufon too: http://cufon.shoqolate.com/generate/
0
 
grahamnonweilerCommented:
You can use @font-face CSS techniques to use almost any font you like in your wesbite.

To generate everything you need (CSS file and relevant font files):

http://www.fontsquirrel.com/fontface/generator

For some general instructions on how to work with @font-face in your CSS see:

http://sixrevisions.com/css/font-face-guide/

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
0
 
nsitedesignsAuthor Commented:
Both of you recommended Font Squirrel.  I see on the link that there are 35 retro style fonts already in their system (see screen shot).  Is there a way to use them?  Are they "good to go"?

http://www.fontsquirrel.com/fontface/generator
http://screencast.com/t/Q4ZxFT4G
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LZ1Commented:
You can upload your own font that your using in the images
0
 
nsitedesignsAuthor Commented:
I guess I don't understand what font squirrel is.  I don't want to use images for the font if I don't have to.  If font squirrel has a retro image listed on their site, is that font then "good to use".  Did they do whatever it is they do at font squirrel to prep the image for the web?  I am confused.
0
 
LZ1Commented:
Font squirrel is a place where you can download and use fonts depending on licensing.

The @font-face generator will let you create your own "web ready" font for use in your website. You can use the fonts on font-squirrel if you'd like.  I thought you had to use that specific font in the images of your nav.
0
 
nsitedesignsAuthor Commented:
Client showed me a site with a font that he likes.  I cannot figure out what font that is.  So, I am trying to find a font which is similar.  I found one that is kinda close on the Font Squirrel site. I downloaded the kit but am not sure what to do with the kit.  It comes with the following files.  Do I upload all these to the server?

http://screencast.com/t/wHwPixiWj
0
 
nsitedesignsAuthor Commented:
The site also says the following:

"NOTE: If you download a @font-face kit from this page, you will get the MacRoman subset. If you would like a different subset, click the "View Font" link and choose the @font-face kit there. You will have a lot more options."

Huh?  What is MacRoman?  I didn't see anything with that name in the downloaded kit.  Do I want a different subset?  Beats me!
0
 
LZ1Commented:
There should be documentation in the demo.html file and the stylesheet.css.  Those files are actually examples.

But in your stylesheet.css you should see this:
@font-face {
    font-family: 'CalligraffitiRegular';
    src: url('Calligraffiti-webfont.eot');
    src: url('Calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),
         url('Calligraffiti-webfont.woff') format('woff'),
         url('Calligraffiti-webfont.ttf') format('truetype'),
         url('Calligraffiti-webfont.svg#CalligraffitiRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Open in new window


So you'll have to actually change the font inside the quotes to match your path to the font. Then in the demo.html you'll see something like this in the head:
h1.fontface {font: 60px/68px 'CalligraffitiRegular', Arial, sans-serif;letter-spacing: 0;}

Open in new window


Again, just change the font 'CalligraffitiRegular' to the font named in the stylesheet.css.

The subset, I've honestly never changed/used.
0
 
grahamnonweilerCommented:
Forget about the "MacRoman" aspect for the moment it is unimportant.

You should open the CSS file in the download kit. This shows you how you would access the font you have chosen.

Also, open the HTML file in the download kit on your local PC - then look at the source and it should become clear to you how you can ammend your CSS file for your website to use the font you have chosen.

You will need to upload the eot, svg, woff and ttf files to the same location as your CSS file.
0
 
nsitedesignsAuthor Commented:
awesome - -thanks all!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now