title: How can I change @font-face source with Javascript?
body: <p>I'm working on a simple tool for designers where the user would be able to input some text and then generate through various fonts to find the best choice for their project.</p>
  
  <p>I'm struggling with finding the best way to load in the fonts. Obviously, I don't really want to load in all the fonts at once, so I need to load in the font only once it has been generated. Using the <code>@font-face</code> CSS rule would be ideal, but I can't seem to figure out how to change the src of the font with Javascript.</p>
  
  <p>Right now, my method is to use Google Fonts, where you load the font with a css link like <code>&lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;</code>. Then I can use Javascript to change the href of that link, which loads in the new font. But this method limits me to using only Google Fonts, whereas it would be ideal to be able to load in local web fonts, TypeKit fonts, etc.</p>
  
  <p>Does anyone have any suggestions for the best way to load in the fonts or how to use Javascript to access the <code>@font-face</code> rule in CSS?</p>