HostOnNet Blog

Combine multiple google fonts as one url

Looking for Linux Server Admin or WordPress Expert? We can help.

google-font

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">

About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Web Design

One Response to Combine multiple google fonts as one url

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.