Quickly try out Google fonts while developing locally?

Question

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?

is the setup strictly HTML+CSS or are you making use of any server side languages/technologies? — Rushikumar, Jan 10 '18 at 20:18
You can edit the DOM in the dev tools, changing the links to the Google fonts and any other elements or CSS without having to actually modify the files on the server. When you make the changes in the dev tools, the browser will make a new request for the font. — j08691, Jan 10 '18 at 20:22

score 0 · Accepted Answer · answered Jan 10 '18 at 20:36

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;
?>

NOTE

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).

Quickly try out Google fonts while developing locally?

1 Answers1

NOTE