Is there a way to import the url font only if it's being used?

I would suggest sticking to a single font and maybe using a cross platform safe font if you REALLY need to emphasize something. Even google suggests only using what you really need. I can't even think of a reason someone needs that many fonts for a web site.

With that being said, google fonts is pretty large in the developer community and the more a certain font is used, the better the chance a user entering your site already has it cached and that will increase load times.

Helpful link:
https://developers.google.com/fonts/faq

Thanks Brandon Benefield . I like your explanation and completely agree. My question is more out of curiosity. I've noticed some websites out there of large corporations that seem to use several fonts which peaked my interest for this question. The continuity of these websites appear to be bang-on, however, I have noticed some variation in fonts for mastheads, banners, and sometimes even navigation links in the header and footer.

Yea you have a very good point here. Now, realizing I am NO expert on the subject. With that being said, I would suggest inspecting the source code the next time you find a website like that and see if you can find out what they're doing to minimize loading times. I really doubt they're using more than one CSS file but I wonder if you could load the font depending on what page you're looking at with JavaScript.

Again not an expert but I bet creating an express app and using pug you could use a conditional to load certain font types, CSS and even JS.

if req.params.id === "something" //of course req.params.id would be a variable in this case
  link(rel="stylesheet" href="yadda yadda")
else 
  //load something else