Learn Performance - Fonts
Web Font
This page uses the web font
Dancing Script. The font file is self-hosted and the
@font-face
is declared in
dancing-script.css.
Each page in this demo contains a paragraph of text with the
fancy
CSS class. The
fancy
class is styled using
font-family: "Dancing Script", sans-serif;. We are instructing the
browser to use the
Dancing Script
web font and fall back to
sans-serif
if the font file cannot be downloaded.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac orci dictum, dictum augue nec, semper sapien. Etiam efficitur a nisl sed semper. Nam et venenatis risus, eget consequat odio. Praesent at purus ligula. Pellentesque tincidunt lorem at augue mattis blandit. Cras at ipsum augue. Duis vestibulum, ex eu commodo tristique, sem dui cursus lorem, quis sollicitudin leo sem et dui. Integer nec pellentesque nisi. Aliquam fringilla quam neque, eget volutpat nisi pharetra ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
The font file is a late-discovered resource as the browser only begins downloading it after having downloaded all render-blocking CSS for the page. Notice how the paragraph is not rendered until the web font has finished downloading. This is the default browser behavior.
View Source Code
@font-face {
font-family: "Dancing Script";
src: url("/DancingScript-Regular.woff2?v=1676325285146");
}
.fancy {
font-family: "Dancing Script", sans-serif;
}