Get started with webfont CDN

Apache-2.0 licensed

A webfont library enables dynamic loading and use of custom fonts on websites without requiring users to download and install font files. Examples include Google Fonts and Font Awesome.

Tags:
  • webfont
  • ui
  • font
  • loader
  • @font-face
  • webfontloader

Stable version

Copied!

How to start using webfont CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.cdnhub.io">
  <script src="https://cdn.cdnhub.io/webfont/1.6.28/webfontloader.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
  </style>
  <title>Get started with webfont CDN - cdnhub.io</title>
</head>
<body>
  <div id="custom-font-container">
    This text will be displayed in the custom font.
  </div>
  <script>
    WebFont.load({
      google: {
        families: ['Roboto'] // Ensure Google Fonts are loaded before the custom font
      },
      custom: {
        families: ['My Custom Font'], // Replace 'My Custom Font' with the name of your custom font family
        src: 'https://cdn.cdnhub.io/webfonts/<your-font-file-name>.woff2' // Replace <your-font-file-name>.woff2 with the name of your font file
      },
      active: function() {
        document.getElementById('custom-font-container').style.fontFamily = 'My Custom Font, sans-serif';
      }
    });
  </script>
</body>
</html>
Copied!

All versions