Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Custom fonts are loaded only when text using them is rendered">
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
  <p style="font-family: Arial">Click the button below to set the fonto to Robot.</p>
  <button onclick="document.querySelector('p').style.fontFamily = 'Roboto'">Open the network tab. Now click the button and notice how the font loads only when text using it is rendered.</button>
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dandvpro
0viewers