CSS - Fonts Render Differently in Firefox and Chrome

I'm using Google Fonts and CSS's @import method to include fonts onto my website.

Chrome displays the fonts beautifully; they have even weights and are crisp to view. Firefox does not replicate this rendering. See below:

On the left you can see Firefox. The font weight of the title is not consistent. You can see that the smaller descriptive text has some additional weight than the Chrome counterpart.

Chrome is on the right, and as you can see, the fonts are respectfully weighted.

I am using the following CSS in an attempt to fix this issue:

@import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro');

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

How can I resolve this issue and have Firefox displaying my fonts with proper weights?

Firefox Version: 57.0.1 (64 bit) [Most recent]

Chrome Version: 62.0.3202.94 (64 bit) [Most recent]

Many thanks.

I have been testing a few things out, and I've found some way to make sure that Firefox doesn't show an inconsistent font weight.

I can use some jQuery to detect the browser, and from there I can add browser-specific styles. In this case, I've added a font-weight to the title block so that it has a lighter font-weight, which creates a cleaner look:

On the left is Firefox with font-weight: 400, and on the right, Chrome with font-weight: 600. See below for my browser-detecting jQuery.

if (navigator.userAgent.search("Firefox") >= 0) {
    $('body').addClass('firefox');
}

My CSS is as follows:

body.firefox h1 {
     font-weight: 400;
}

It's not necessarily a fix, however it removes the choppy-ness of the font weighting.

Please feel free to comment about any better ways of doing this, or with a more practical solution to the question.

Many thanks.