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
1.0.19
1.0.31
1.1.0
1.1.1
1.1.2
1.3.0
1.5.10
1.5.11
1.5.12
1.5.13
1.5.14
1.5.15
1.5.16
1.5.17
1.5.18
1.5.19
1.5.20
1.5.21
1.5.8
1.5.9
1.6.0
1.6.1
1.6.10
1.6.11
1.6.12
1.6.13
1.6.14
1.6.15
1.6.16
1.6.17
1.6.18
1.6.19
1.6.2
1.6.20
1.6.21
1.6.22
1.6.23
1.6.24
1.6.25
1.6.26
1.6.27
*** 1.6.28
1.6.3
1.6.4
1.6.5
1.6.6
1.6.7
1.6.8
1.6.9