In my Django app I use the Lobster font in a few places, including to display the title of the App on the home page:
A slightly simplified version of the html looks like this:
<div class="jumbotron" align="center">
<h1 class="fancy">Miniquad Maps</h1>
and the css for
font-family: 'Lobster', cursive;
Today I noticed that sometimes part of certain characters will get cut off. For example, notice the "d" in "Miniquad" and the "s" in "maps":
I can reproduce this effect pretty consistantly by selecting the letters in question with the mouse, and then deselecting them.
You can also see that sometimes the entire character can be highlighted during selection:
and sometimes a portion of the character is not highlighted:
My question (more out of curiosity than anything else) is: what causes this aberation in the way the characters are rendered after selection? Is it caused by something I have done wrong in my own code? Is it my browser (Chrome)? Bootstrap? The Lobster font?
I am trying to expand my knowledge of web development and design, and any insight would be appreciated.
As @andi has pointed out in the comments, this doesn't appear to be specific to my site. The same thing can be found with the Lobster font on the Goggle Fonts page linked at the top of the post. After learning this, I tested a few other similar-looking fonts, and found that Lobster is not the only one with this characteristc. For example, the same thing is true of the Molle font.