---
slug: "WebFontLoaderひな型"
title: "Template for WebFontLoader"
description: "\n\n\nWhen using WebFont, you may encounter a phenomenon called FOUT (Flash of Unstyled Text) where text is not displayed if the font fails to load."
url: "https://www.ytyng.com/en/blog/WebFontLoaderひな型"
publish_date: "2015-12-02T09:32:02Z"
created: "2015-12-02T09:32:02Z"
updated: "2026-02-27T05:35:37.048Z"
categories: ["HTML"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20230812/d3e0ff79235e401499432c3da9bcd1e5.png.webp?width=768"
has_video: false
has_music: false
video_urls: []
music_urls: []
lang: "en"
---

# Template for WebFontLoader

<div class="document">


<p>When using WebFont, you may encounter a phenomenon called FOUT (Flash of Unstyled Text) where text is not displayed if the font fails to load.</p>
<p>By using WebFontLoader, you can display a fallback font until the desired font is fully loaded.</p>
<p>JS (HTML)</p>
<pre class="literal-block">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"&gt;&lt;/script&gt;
&lt;script&gt;
  WebFont.load({
    custom: {
      families: ['light-ja'],
      urls: ['css/font.css']
    }
  });
...
</pre>
<p>css/font.css</p>
<pre class="literal-block">@font-face {
    font-family: "light-ja";
    src: url("../fonts/mplus-1p-light.woff");
}
</pre>
<p>Main css</p>
<pre class="literal-block">.wf-active * {
    font-family: "light-ja", sans-serif;
}
</pre>
<p>I think this should work.</p>
<p>References</p>
<p><a class="reference external" href="https://github.com/typekit/webfontloader">https://github.com/typekit/webfontloader</a></p>
</div>