I have used the tool quite often now and at some point I could not decide, which settings would fit better, just by looking at it.

I made a small tool that helps you do that (at least for letter-spacing and word-spacing).

Maybe there is some more people using this that thought about something like that already.

https://dazlious.github.io/font-matcher/

Can you add online demo link please?

Using em unit are better for scability : should use the same settings for differents font sizes.
But need at lease 0.005em of precision.

Maybe it's better for Google employees to work on implementing the font-size-adjust property in the Blink engine? This feature is already in the status of Candidate Recommendation.

Apologies if this is a stupid question but how do you apply styles that only get applied on the fallback font?

This is a cool idea but not every new project uses a font available from Google Fonts.

I think it would make sense to be able to include a custom header html to load a font from e.g. Typekit or similar font services.

...so you can better see the height difference between the fonts.

First of all: great tool! Good for working on FOUT issues :)

But one thing I'm really missing is a comfortable way (instead of the dev tools) to adjust the dummy text ('The fox jumped...').
So for example a textarea to define a custom dummy text.

This is really useful if optimizing a certain language or to test certain headlines.

@notwaldorf can such a feature be added?

1. Summary

It would be nice, if Font style matcher will support font-style CSS property.

2. Argumentation

Web developers may use italic or oblique font faces as in this example:

a
    font-family "El Messiri", "Trebuchet MS", Helvetica, sans-serif
    font-size 1.3rem
    font-style italic
    font-weight bold

Currently, in Font Style Matcher we can’t see how exactly will look in this case web font El Messiri and fallback fonts.

Thanks.

Right now when you type in a font you don't get any feedback if the font you typed is loaded or not. Since fonts change while still typing the name in, there could be times when people think they got the right font while in fact they got another font that has a part of the same name.

For example: If there is a font called Aria, you type in Aria but its actually loading Arial.
1: You don't see an error that "Aria" is not loaded
2: You don't see which font is loaded so you don't see that you got the wrong font except for esthetics of the font itself.

Also why is Trebuchet MS not working?

To avoid users needing to manually type which option they're using, offer up a list they can choose from based on Google Fonts.

Fonts exposes an API that would allow you to do this: https://developers.google.com/fonts/docs/developer_api by querying https://www.googleapis.com/webfonts/v1/webfonts?.

I'll try and do a PR for this when I have some time!

It would be great if the line-height could be switched to unitless (e.g 1.4), however, I'm not sure if this is just me though!