Sub menu

I added Alex+Brush font to my website to have my menu show this font. All of my tabs display the font except my "Blog" tab, on the Blog page.  That is when I click on the Blog tab and I am taken to the Blog page, the menu is not in Alex+Brush. I entered the google font link to the page as I did with all other pages. : <link href='fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'> . The Blog page menu stills doesn't show the Alex font.  How or where do I place

.sub-menu {
font-family: open_sans, arial;
}
in my #nav-wrapper? or web site?

/* Secondary wrappers */
#nav-wrapper {
	background-color:#78a5b6;
	border-radius:60px 60px 0 0;
	-webkit-border-radius: 60px 60px 0px 0px;
	height:37px;
	text-align:center;
	font:normal 32px Alex Brush, open_sans, Arial, sans-serif;
		font-size: 2rem;
	color:#fff;
	position:relative;
	z-index:1000;

Open in new window

DrEddieSAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott FellDeveloper & EE ModeratorCommented:
We need to see you complete sample page to see the issue.  Please provide a link.

However, I do see an issue with your call to google fonts.  You are not actually using google fonts and instead using the alex brush on your own computer.

Try the 3 links below.  Notice how the last two will have the same results.  You need to start your call to google fonts using http or //

 <link href='//fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<!-- or -->
<link href='http://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>

Open in new window


Using href='//fonts....
http://jsbin.com/tohuro/2/edit
  <link href='//fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
  <style>.alex{font-family: 'Alex Brush', cursive;}</style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="alex">this is alex brush</div>
</body>
</html>

Open in new window


No call to google fonts
http://jsbin.com/tohuro/3/edit
<!DOCTYPE html>
<html>
<head>

  <style>.alex{font-family: 'Alex Brush', cursive;}</style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="alex">this is alex brush</div>
</body>
</html>

Open in new window


No http or // just href='fonts...
http://jsbin.com/tohuro/4/edit
<!DOCTYPE html>
<html>
<head>
  <link href='fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
  <style>.alex{font-family: 'Alex Brush', cursive;}</style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="alex">this is alex brush</div>
</body>
</html>

Open in new window

DrEddieSAuthor Commented:
DrEddieSAuthor Commented:
code snippet for navigation menu:


/* Secondary wrappers */
#nav-wrapper {
	background-color:#78a5b6;
	border-radius:60px 60px 0 0;
	-webkit-border-radius: 60px 60px 0px 0px;
	height:37px;
	text-align:center;
	font:normal 32px Alex Brush, open_sans, Arial, sans-serif;
		font-size: 2rem;
	color:#fff;
	position:relative;
	z-index:1000;
}
 .sub-menu {
font-family: open_sans,'Alex Brush', cursive, arial;
}

Open in new window

Scott FellDeveloper & EE ModeratorCommented:
First, make sure your template uses common features like css. That is the main problem.  You don't have the call to the font on the blog page.

On the home page, your style sheet needs to be in the head section and the link below is not.
<link href="http://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet" type="text/css" /> 

Open in new window

On the blog page, your only reference to that font is
<meta name="description" content=".alex{font-family: 'Alex Brush', cursive;} JS Bin this is alex brush" />

Open in new window


On a side note, take a look at the validator http://validator.w3.org/.  You have some errors that need to be taken care of.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Miscellaneous

From novice to tech pro — start learning today.