Is there a faster way of loading custom Chinese/Japanese fonts in HTML/CSS than @font-face?

Question

I am working on a website that is mainly in Chinese language but has Japanese phrases and sentences scattered all around. It is important for me to maintain an overall unified style in fonts, while at the same time be very careful about the way Japanese characters are displayed. That is, I am not allowed to simply substitute these Japanese characters with their close counterparts in Chinese. To this end, I am currently using different custom fonts for Chinese and Japanese separately. These are visually similar OTF fonts specifically designed for Chinese or Japanese only. I load them through the CSS @font-face command. However, these .otf font files are several MB's large and take seconds, even up to minutes to load. Moreover, this happens for every new web page the viewer opens. I am wondering if there is a faster way of loading these fonts. Your help is much appreciated!

(Warning: I am a beginner.)

P.S. My website caters to mainland Chinese viewers so google fonts might not be a good solution here.

Answer 1

I ended up using the "dynamic subsetting" functionality provided by Adobe Typekit. It dynamically generates font files that only include characters used on the webpage, and sends it via its content delivery network. All I needed to do was to make an account, select fonts form their website, and include some codes for external javascript files in my HTML. One downside of this method is that I can no longer use my own fonts, and the range of Chinese/Japanese fonts provided by Adobe Typekit seems limited. Luckily I was able to find the fonts that suit my need. Also I still experience a certain degree of FOUT but I suppose it's not a big deal for me at present. Still hoping for an open-source solution in the future, though.

Answer 2

You could use WebFontLoader for improving performances of @font-face. It's developed by Google and Typekit. You can use it with their services and also for self hosted fonts.

1. Include fonts in css using @font-face, as you already did.

   @font-face {
       font-family: 'My Font';
       src: ...;
   }
   @font-face {
       font-family: 'My Other Font';
       src: ...;
   }
   

2. Add this code to the bottom of your main page, just before </body>

   <script>
     WebFont.load({
       custom: {
         families: ['My Font', 'My Other Font']
       }
     });
   </script>