Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #29569

    Hi,

    How can I add custom font, “Microsoft Yahei”, to Chinese site only? Not sure if it’s a Google webfont but it can be found in the Chrome web store at https://chrome.google.com/webstore/detail/force-microsoft-yahei-fon/ojlocjfaheiilmgjdgnoehhdigfedhjl?hl=en.

    Thanks,

    #141017

    Hi,

    I think it is a browser extension that force all kind of websites to display the chinese font. Not really a theme related plugin.

    Regards,

    Ismael

    #141018

    Ismael,

    This is what I found from a css file of one such website that uses this “Microsoft Yahei” font.

    @charset “utf-8”;

    /* CSS Document */

    *{ margin: 0; padding: 0 }

    body, button, input, select, textarea, font { font-size:12px;font-family:”Microsoft Yahei”,tahoma, sans-serif; color:#181818;}

    h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight:normal }

    em { font-style: normal }

    ul, ol { list-style: none }

    img { border: 0 }

    *html{

    background-image:url(about:blank);

    background-attachment:fixed;}

    .clear{ clear:both}

    See it has it as part of the font-family?

    Thanks,

    #141020

    Hi,

    Do you have a license? Did you buy the font? http://www.microsoft.com/typography/fonts/font.aspx?FMID=1618

    Regards,

    Ismael

    #141021

    Hi Ismael,

    I would consider to buy it if I can use it. Is it possible to add this font to the them css file?

    Thank you,

    #161570

    You can use a font face generator like: http://www.fontsquirrel.com/tools/webfont-generator to generate your font files. Then copy the css code from the included css file (can be found in the zip file which is generated by the fontsquirrel generator) into your child theme style.css and place the font files (eot, woff, etc.) into the child theme directory. You can also add the code from this post: http://wpml.org/forums/topic/body-class-based-on-language/#post-18785

    
    add_filter('body_class', 'append_language_class');
    function append_language_class($classes){
      $classes[] = ICL_LANGUAGE_CODE;  //or however you want to name your class based on the language code
      return $classes;
    }
    

    to the child theme functions.php to add a language specific class to the body. Then you can apply the font face font to the Chinese version of the website only.

    • This reply was modified 11 years, 1 month ago by Dude.
    #161605

    Hi Peter,

    Thank you for the detailed instructions.

    I tried to upload the font but it complained it was too big to upload. The font is about 14Mb in size. Is there another way to do it?

    Thank you,

    #162174

    Tbh it makes no sense to use a custom font if the file size of the font file is 14mb. It probably takes 1 – 3 minutes for the browser to download the font file and the user won’t notice the font anyway because he probably leaves the webpage before the browser can load the custom font & replace the default font with your 14mb font. In addition it will slow down the website loading time and the user will see an ugly “text flash” when the 14mb font is loaded. Especially users with mobile devices and slow internet connections will leave your website because of the long loading times. If your font file is bigger than 500kb I strongly suggest to stick with the default web safe fonts (see http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/ ). I also found this article: http://www.wiliam.com.au/wiliam-blog/web-design-sydney-chinese-web-fonts – maybe you can use the justfont service instead of font face fonts to embed a custom font.

    #162177

    Hi Peter,

    I was hoping that after the conversion, it would become something small in size. But I agree with what you just said.

    So I will stick with the default fonts.

    Thank you again for spending your time answering my question and writing me detailed instructions. I really appreciate it!

    Thank you,

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How to add custom font for Chinese version of site only’ is closed to new replies.