Is there a tool to test out fonts by applying them to the website?

[Sofia]

Hi, I have spent hours choosing different fonts for my web project. I need a nice combination of Headings/Body fonts. But I am a hobbyist, I do not understand what fonts work well and where.

What I am looking for, is a kind of tool, that I can quickly apply to my existing site to test out different fonts. Why? Currently, I have to find the font(s) combination first. Then I have to add it to my site by uploading or adding a link. Then apply it in my CSS. If it looks bad (usually it does), I have to remove everything and start with another font(s) again. 

It costs a lot of time. So, I wonder if there is a quick tool to test the fonts on the existing site without all these steps with uploading or linking and removing afterward. 

The tools where I can only enter some text to see what the font looks like do not help. It should be applied to the whole site, ideally with a heading/body combination. And that on the fly, just to test. And only IF something looks good, then I can start uploading and linking and working with CSS.

Do you know what I mean?

[Ralf Herrmann]

I remember services like that from the days that webfonts were new, but I think they are all discontinued. What kind of sources for the fonts do you have in mind? For free fonts, e.g. from Google Fonts, you could just apply the code in the browser’s developer tools. That would be on the fly and only visible to you. 

[Sofia]

Yes, I try to find fonts combinations in Google Fonts. I guess my first issue is that I cannot find a combination of heading/body that looks good. The second one is applying the combination for the test. It took 10 minutes to apply and two seconds to see how bad it is 😄 and then again 5 minutes to revert everything and start from the beginning.

I will give developer tools a try, this is a good idea.  

[Ralf Herrmann]

For Google fonts, you can use browser extensions like https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en

[Sofia]

This is almost perfect!!! Installed, click on items, apply font and even generate CSS. Wow, wow, wow!