In this post, I will show you how to Combine multiple google fonts into one url.

Today , Started new a Web Design project and I would like to use google fonts like Montserrat and Lato in this porject.

As we know, Google offers 3 ways to load the Google web fonts – @import, link rel and javascript.

When ever I need mulitple fonts I used google font links as one by one into my html page.

<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

We can load multiple Google fonts with a single line of code. You need not paste single line codes for each font you load.

See the example below where I combined the Montserrat and Lato

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Montserrat|Lato">

If the google fonts url like below

<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

The one line code should be

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Lato:300,400,700,300italic,400italic,700italic">