I'm trying out different Google fonts on a website that I'm developing locally. As I'm trying out a lot of fonts its quite time-consuming to have to load the font in the HTML and then update the CSS each time.
Is there a faster way try out fonts in local dev environment?
Yet another way, using PHP would be to do something like this...
<?php
$divCntr = 1;
$googleFonts = array("Tangerine", "Roboto", "Oswald", "Ranga");
foreach($googleFonts as $gFont):
?>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=<?php echo $gFont; ?>">
<style>
#demo-<?php echo $divCntr; ?> {
font-family: '<?php echo $gFont; ?>', serif;
font-size: 18px;
}
</style>
</head>
<body>
<div id="demo-<?php echo $divCntr; ?>">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id augue dui. Sed eget libero ac ipsum varius tempus non vel odio. Suspendisse potenti. Sed vel elit a metus dignissim commodo. Maecenas luctus mauris lorem, ut egestas magna pharetra et. Praesent rhoncus augue ac metus lobortis porttitor. Morbi risus tellus, dictum vel magna sed, egestas imperdiet est. Sed quis facilisis nulla. Nulla fermentum libero id purus pellentesque accumsan. Nam rhoncus magna et sodales ullamcorper. Maecenas ac eros dignissim, dignissim purus in, vehicula velit. In id erat ac arcu vestibulum mollis non eu ligula. Mauris placerat a eros ut vehicula. Integer lobortis aliquam eros, imperdiet blandit massa pellentesque ac.</div>
<br>
<br>
<br>
</body>
</html>
<?php
$divCntr++;
endforeach;
?>
The above is merely a proof of concept... obviously, refinements etc. need to be made.
It also gives an alternative solution for folks that cannot use any browser plugins etc. (for whatever reason).