Solved

CSS change font family of nav menu on page

Posted on 2014-01-23
4
372 Views
Last Modified: 2014-01-24
I'm missing something in the way my CSS is cascading.

I am trying to install a google font on the navigation menu of this site but wherever I put it nothing is overwriting what is currently there.  Any help would be appreciated.

Thanks,

http://sendright.com/draft/lauren/
0
Comment
Question by:gwarcher
4 Comments
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39805670
What part of your css is overwritten.
Please elaborate.
Which ever part is getting overwritten you could use   !important for your required css so as to avoid such problems
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39805817
I see you loaded the css file, I don't see you assigned the font.

In your custom css you need to add,

font-family: 'name_of_font',

Open in new window

 
See the instructions for your particular font on the 3rd step http://www.google.com/fonts#UsePlace:use

You should be able to assign using

ul#menu-menu-1 li a{font-family:'name_of_font',sub_font;}

You either need to put this at the buttom of your style.css file or create a custom css file that is loaded after the style.css file or the !important hack.

Your current font is in your style.c line 407
media="all"
.main-navigation a {
border-radius: 3px;
color: #998675;
display: block;
line-height: 21px;
margin: 7px 10px;
padding: 5px 10px;
text-decoration: none;
font-family: Calibri;
font-weight: bold;
font-size: 14px;
}

Open in new window



As a side note, if I have the font Calibri on my system, I will see this as Calibri.  That font came with my Mac.  I don't know if it comes standard on a windows machine. I know for sure it does not come loaded on the older pc's.  And I did not see Calibri loaded in your google font css files.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39806202
Calibri is a standard font on Windows now, it was on my Windows 7 machine pretty many years ago.
What is the name of the font you want to use?
Also, are you using Firebug to try to add the font to the elements in your CSS? It helps you see where to put the font style.
0
 

Author Closing Comment

by:gwarcher
ID: 39807264
thanks worked great
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

775 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question