chemitaxis chemitaxis - 11 months ago 50
CSS Question

Google font with font-weight: bold not have same size

I have a problem with Google Fonts and font-weight.

My Problem is that I have a div with content editable text where the user can edit the font weight, but the font weight bold CSS property is rendered different between browsers...

Can I have any option in CSS to make the font-weight:bold in the same size?

If you check the example Fiddle in FF, Chrome or Safari, you will see that the text is in two lines in FF and Safari, and with one line in Chrome:

Here you have the code tested:

@import url(;

z-index: 2;
font-family: Satisfy;
left: 100px;
top: 100px;
font-size: 45px;
color: rgb(204, 204, 204);
width: 249px;
height: 64px;
position: absolute;
display: block;

text-div {
-webkit-line-break: after-white-space;
display: block;

*, :after, :before {
box-sizing: border-box;

*, a, button, I, input {
-webkit-font-smoothing: antialiased;

*, :active, :hover {
outline: 0!important;
-webkit-tap-highlight-color: transparent!important;

.text-align-left {
text-align: left;

<div class="text-div" style="padding: 0px; display:inherit; transform:matrix(0.9903,-0.139173, 0.139173,0.9903,0,0); -webkit-transform:matrix(0.9903,-0.139173, 0.139173,0.9903,0,0);" spellcheck="false">
<span style="font-weight: bold;">Chema Roldán</span>


Answer Source

That font doesn't have a bold variant in the family (according to ''. So you're asking the browser to interpret font-weight: bold. With webfonts you really should pick a family that includes a stronger or bold variant if you need it and specify font-family vs. font-weight in your css, or use the font-weight identifier (usually a number like 200-700) if included in the family.