Semantic Yet SEO Friendly Graph Bar

Back in 2012, Sergio Zambrano wrote a post on how a simple custom font can be used to create a semantic yet seo friendly graph bar. Since the original article was lost, this is a recreation of that same post, showing how a custom font can be applied to display an SEO friendly graph bar.

The graph bar uses plain text with no extra fluff, no JavaScript, divs or SVGs. Just plain numbers in a custom font-type and some CSS. Here’s an example of how the graph bar looks in a poll.

Do you believe WordPress’s default security features are sufficient for most websites?

• Yes   67%
• No   33%

based on 751 votes

And now here’s the exact same poll, but without using the custom fonts.

Do you believe WordPress’s default security features are sufficient for most websites?

• Yes   67%
• No   33%

based on 751 votes

Try it yourself

1. Download the decbar and graphbar fonts by Sergio Zambrano.

decbar and graphbar fonts

Download

2. Upload the individual folders to the fonts directory on your website.
3. Add the following code to your CSS stylesheet. Make sure to replace yoursite.com with the URL of your website. This basically adds a reference to the custom fonts we uploaded and some basic CSS styling.

@font-face {
  font-family: "decbar";
  src: url("https://yoursite.com/fonts/decbar/decbar.eot");
  src: url("https://yoursite.com/fonts/decbar/decbar.eot?#iefix") format("embedded-opentype"),
    url("https://yoursite.com/fonts/decbar/decbar.woff2") format("woff2"), url("https://yoursite.com/fonts/decbar/decbar.woff") format("woff"),
    url("https://yoursite.com/fonts/decbar/decbar.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "graphbar";
  src: url("https://yoursite.com/fonts/graphbar/graphbar.eot");
  src: url("https://yoursite.com/fonts/graphbar/graphbar.eot?#iefix") format("embedded-opentype"),
    url("https://yoursite.com/fonts/graphbar/graphbar.woff2") format("woff2"), url("https://yoursite.com/fonts/graphbar/graphbar.woff") format("woff"),
    url("https://yoursite.com/fonts/graphbar/graphbar.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.graphbar {
	display: inline-block;
	font-family: decbar;
	line-height: 1em;
	position: relative;
	font-style: normal;
	color: #5e17eb;
	font-size: 1.2em;
	text-align: left;
	text-shadow: none;
	z-index: 1;
	top: 2px;
}
.graphbar strong {
	display: block;
	position: absolute;
	left: 0px;
	color: #5e17eb;
	text-indent: 0;
}
.graphbar strong:first-letter {
	font-family: graphbar;
	position: absolute;
	left: 0px;
	font-style: normal;
	z-index: 3;
}
li:hover .graphbar:before {
	content: "\25";
        color: #fa6605;
	position: absolute;
	font-family: graphbar;
	font-weight: bold;
	z-index: -1;
}

4. Use the graph bar in your HTML code through the graphbar class, which in turn uses the decbar and graphbar fonts uploaded earlier. Here’s an example of the HTML.

<strong>Do you believe WordPress's default security features are sufficient for most websites?</strong>
<ul>
<li>Yes &nbsp; <span class="graphbar"><strong>67</strong>%</span></li>
<li>No &nbsp; <span class="graphbar"><strong>33</strong>%</span></li>
</ul>based on <strong>751</strong> votes

That’s it! A simple example of how a custom font can be used to create a graph bar that’s crawlable by search engines.

If you liked this post, make sure to check out a similar application of custom fonts in my post on how to create semantic yet SEO friendly rating stars.