Layout shift on Hover when Text is Made Bold

[davidhelp]

Hello

See link below for example.

Move curser over the hyperlinks to see the layout shift over.
I would like to change the font in a hyperlink when you hover the curser over the text. You can see the layout shift when this happens.
If you remove the font-family: 'Georgia' then the layout does not shift.
I am using a fake bold using the text-shadow: property.
If I do not use it then the layout shifts as well.

Questions: Is there a better way then using the fake text shadow to create bold text when the curser hovers over the text and also can I change the font without the layout shifting over?
http://davidswebsite.com/test/Layout_shift.html

[osgood_]

My advice would be to stick with the same font/weight and you won't encounter the movement. Most fonts will have different spacing/cuts and weights, so wont occupy the same physical space, causing small variations when 'replaced' with a different font/weight.

[Nancy OShea · Accepted solution]

Change this:

<style>
a:link {color: #000000; text-decoration: underline; font-family: 'Georgia'; }       /* black */
a:active {color: #ff0000; text-decoration: underline; }     /* red */
a:visited {color: #0080ff; text-decoration: underline; }    /* blue */

a:hover { color: #ff0000;   /* red */
text-decoration: none;
background-color: white; }
/* red text, white background on mouse hover*/  
</style>

To this:

<style>
a {color: #000; font-family: "Georgia", "Times New Roman", serif;}

a:visited {color: #0080ff;}

a:hover, a:active, a:focus {
color: #ff0000; 
background-color: #FFF;
text-decoration:none;
}
</style>

[davidhelp]

Thanks for the tip. I had looked and looked from searches on the internet and there were several suggestions and none were your answer.

I was giving up and was just going to remove the fake bold text shadow property and add the font Georgia to help indicate the hyperlink. If I wanted it bold it, it does shift the layout but using Georgia font makes it appear bold compared to the Roboto font or Open sans fonts I use so no need to.

Your answer is much much better. Thanks again.

Test page:  http://davidswebsite.com/test/Layout_shift.html

[osgood_]

Adding any variation to the font which affects the width, like bold, italic, a different font will cause a 'page shift' as the result will be the font will occupy more or less room, so best to just highlight the text in a different color or add/remove the underline to give it distinction.