Can't get font to match other site's font exactly via CSS

On there is text in the top right.

I am trying to display that exact same text on

For some reason on the latter the fonts are shifting a little bit out of position when you compare the two.

Any idea why?
Who is Participating?
COBOLdinosaurConnect With a Mentor Commented:
on the .com version it is inheriting from the body this:
text-rendering: optimizelegibility;

You cannot expect the rendering of elements to be exactly the same unless the styling is exactly the same.

The best reference for text-rendering is:

Chris StanyonCommented:
The slight difference is likely to be down to the different ways you load the Open Sans font - on the first site you are loading the font from the Google API with a link in the HEAD of your document.

In the second site, you are loading the font using a font-face declaration in your CSS.

Try matching the methods that your fonts are called one way or the other. The Google link will take care of cross-broser issues so is probably easier
Dave BaldwinFixer of ProblemsCommented:
The layout isn't the same either.  The 'newer' version has a lot more nested elements.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.