Solved

CSS change font family of nav menu on page

Posted on 2014-01-23
4
373 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

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…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

830 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