Setting font for dt elements side-effects on Chrome

Question

I'm seeing weird effects on Chrome when setting the font for definition lists when float: left is used for positioning the term and its definition on the same line. This fiddle illustrates the situation: https://jsfiddle.net/h6vp2knz/1/ .

The spacing on the left side of dd elements varies in seemingly chaotic ways. If the definition is long enough to require more than one line, the first line seems to be aligned with the right side of the previous term, the next line aligned with the term corresponding to the definition, and subsequent lines to the left side of the container.

If font-family is not set for the term, or both dt and dd elements are set to have the same font, everything looks as I expect: no matter how long the definition is, it starts right after the term and all subsequent lines start from the left side of the container. This is also what I'm seeing on Firefox.

I haven't been able to find out what produces this behaviour, but I'm interested in knowing what this is all about and what would be a good workaround for setting different fonts for the terms and definitions across browsers.