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

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>