How to Load Multiple Google Fonts into One Single Request

2015/10/21 min read
bookmark this
Responsive image

If you page need more than one google fonts, instead of request multi times. You can try using | to seperate them. 


  <link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic" rel="stylesheet" type="text/css" />
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css" />
    <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
    <link href="//fonts.googleapis.com/css?family=Cabin:400,700" rel="stylesheet" type="text/css" />
    <link href="//fonts.googleapis.com/css?family=Alegreya+Sans:400,700" rel="stylesheet" type="text/css" />


A example of how to request google fonts in once.
<link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic|Open+Sans:400,600|Source+Sans+Pro:400,700,400italic,700italic|Cabin:400,700|Alegreya+Sans:400,700" rel="stylesheet" type="text/css" />