6

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.

user23823
  • 161
  • 6
  • 1
    Google "webfonts + fouc" (flash of unstyled content). – connexo Jan 05 '17 at 10:05
  • With a program like [font-forge](https://fontforge.github.io/en-US/) you could try to remove any unneeded glyphs from the font as to send over as little information as possible. Otherwise you could define some fallback font's that look similar enough to use as fallback while loading. You could then place the css that is resposible for loading the fonts [at the bottom of your HTML](http://stackoverflow.com/questions/8033622/css-stylesheets-at-top-or-bottom-or-how-to-solve-blank-page-issue#21749882) so there is something to see while loading. – Yemachu Jan 05 '17 at 10:33
  • @connexo Following your advice, I skimmed through some articles on this topic. Yes, my website does have this FOUC problem while the fonts are being loaded, which definitely needs to be resolved, but I still do not understand whether combating FOUC is the same thing as improving the speed of font loading. Seems like I am being naive here but would you please provide some more information? – user23823 Jan 05 '17 at 10:37

2 Answers2

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>
ITesic
  • 19
  • 5
  • Sorry I have to uncheck this answer because apparently the speed improvement that I was experiencing yesterday was due to the use of cache, and it had nothing to do with WebFontLoader. Moreover it does not work as I supposed in my last comment. This question is still open. – user23823 Jan 06 '17 at 11:30
0

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.

user23823
  • 161
  • 6