HostOnNet Blog

Combine multiple google fonts as one url

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 hostonnet2

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

  • yer remer

    Valuable writing ! Apropos , if someone require to merge two images , my colleague used a service here https://goo.gl/GtZNzf.