Embedded Fonts with Anchor Issues

Get Started
1

Hi,

I seem to be having some problems with using anchors on my embedded fonts. I think that’s the correct way to refer to it.

When I use an anchor on embedded fonts, only half the embedded font is made into an anchor, the rest is unclickable. Here is the code I am using in CSS for the embedded font, and the code for the anchor, and a screen capture of what’s happening visually.


@font-face {
	font-family: Franchise;
	src: url('../data/franchise.ttf');
	}
#menuNavigation {
	font-family: Franchise;
	font-size: 28pt;
	color: #fff;
	margin: 0 0 20px 0;
	text-shadow: 1px 1px 1px #000;
	
	float: right;
	margin: 50px 10px 0;
	}



<div id="menuNavigation">
	<ul>
		<li><a href="#home">Home</a></li>
		<li><a href="#products">Products</a></li>
		<li><a href="#services">Services</a></li>
	</ul>
</div>

Any help would be greatly appreciated! :slight_smile:

Thanks!

2

Josh, there is a heated debate over this issue on the cSS forum, maybe look at that thread. One thing to make sure is that you have permission to use the fonts.

3

After a bit of research I have found my solution.

I had to create some alternative fonts for the handful of popular browsers used today to effectively create the @font-face effect.


@font-face {
	font-family: 'FranchiseRegular';
	src: url('../data/franchise-webfont.eot');
	src: local('?'), url('../cs-data/franchise-webfont.woff') format('woff'), url('../cs-data/franchise-webfont.ttf') format('truetype'), url('../cs-data/franchise-webfont.svg#webfontiNgOEVhr') format('svg');
	}
#menuNavigation {
	font-family: FranchiseRegular;
	font-size: 28pt;
	color: #fff;
	margin: 0 0 20px 0;
	text-shadow: 1px 1px 1px #000;
	
	float: right;
	margin: 50px 10px 0;
	}

My apologies, but I do not remember where I found this solution at to give credit where credit is due.

I hope this helps if someone else is having this same problem.