Sub menu

DrEddieS
DrEddieS used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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

Author

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

Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial