asked on

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

Scott Fell

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

DrEddieS

ASKER

www.eventswambiance.com

DrEddieS

ASKER

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

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial