7 Replies Latest reply: May 11, 2012 12:38 PM by achen08 RSS

    Insert chinese font using css?

    vincentccw Community Member

      How do insert default chinese font into my website using css, and what are the web-safe chinese font available?

       

      let say I have my dafault english font set like this

       

      body{

                font-family:Arial, Helvetica, sans-serif;

      }

       

      where do I add in the chinese font?

       

      I try doing like this

       

      body{

           font-family:Arial, "黑体" ,Helvetica, sans-serif;

      }

       

      But it doesnt seem to be working...

        • 1. Re: Insert chinese font using css?
          David_Powers ACP

          I don't have experience with Chinese (only Japanese), but I found this useful article: http://yukikodesign.com/orangutangy/?p=191. It suggests that your font stack is OK for Chinese, but only on Windows.

           

          Another article that I found at http://graficareal.net/blog/wordpress-sinotype-websafe-chinese-plugin/ suggest adding Hei, SimSun to the font stack for Mac/Windows compatibility:

           

          font-family: Arial, Helvetica, Hei, SimSun, sans-serif;

           

          It's possible that your font stack isn't working because the Chinese characters for the font name aren't encoded correctly. I remember reading some time ago in the CSS specifications that browsers must also respect the romanized version of Asian font names. So, it might be a good idea to try that.

           

          The other point is that you must have the relevant font(s) on your computer to see them rendered.

          • 2. Re: Insert chinese font using css?
            vincentccw Community Member

            Hi David, thanks for the details explanation for the problem. I finally got the chinese font working, yes my pc doesnt recognize the chinese characters, but once i replaced with the english version of the font, everything works =)

            • 3. Re: Insert chinese font using css?
              achen08 Community Member

              Hey guys,

               

              I'm having the same problem. When I'm writing code and viewing my page in dreamweaver, all the chinese characters are visible.. but when I goto view in a browser, they all show up as wingdings or similar. I even tried stacking a whole bunch of fonts

               

              font-family: arial, Hei, SimSun, 宋体, 黑体, 黑体, 微软雅黑, 宋体, sans-serif;

               

              but to no avail. I'm not sure if my browser's language settings include international languages, but that just makes me question why websites like www.yahoo.com.tw display perfectly fine for me ?

               

              Pardon me for being a noob!

              • 4. Re: Insert chinese font using css?
                vincentccw Community Member

                If you have no problem viewving chinese/other language using your browser then I think you browser setting is fine, but just to be sure if the problems really rise from your html file not the browser, just try put your html file online and view in other pc, see if the same problems occur....

                 

                If it is really the problems with your html file(not computer/browser setting), may be you didnt set the language in your html document, take a look at this:

                http://webdesign.about.com/od/localization/a/aa043007.htm

                 

                Let me know if it works, as I'm collecting more info on this particular problems.

                • 5. Re: Insert chinese font using css?
                  achen08 Community Member

                  Hey vincent, thanks for your reply. The website you referenced has everything I need. However, i am making this website as I learn HTML/CSS, so everything is really new for me and I don't have a very deep understanding of all the attributes. This is what some of my code looks like:

                   

                   

                  <!DOCTYPE html>

                   

                  <head>

                   

                  <title>About</title>

                  <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />

                  </head>

                   

                   

                   

                  <body>

                   

                  <div id="outer">

                   

                      <div id="wrapper">

                   

                   

                          <div id="banner">

                          <h1 id="chi1">首頁</h1>

                          <h1 id="eng1">Welcome</h1>

                          </div>

                     

                        

                          <div id="topnav">

                              <ul id="left">

                              <li><a href="home.html">HOME</a></li>

                              <li><a href="about.html">ABOUT</a></li>

                                 <li><a href="events.html">EVENTS</a></li>

                                 <li><a href="pictures.html">PICTURES</a></li>

                                  <li><a href="media.html">MEDIA</a></li>

                              <li><a href="contact.html">CONTACT</a></li>

                              </ul>

                         

                                <ul id="right">

                               <li><a href="home.html">首頁</a></li>

                              <li><a href="about.html">有關</a></li>

                              <li><a href="events.html">事件</a></li>

                                 <li><a href="pictures.html">照片</a></li>

                              <li><a href="media.html">媒體</a></li>

                              <li><a href="contact.html">連絡</a></li>

                              </ul>

                          </div>

                   

                  So as you can see, I have a bilingual webpage. If i understand correctly, i can either define the language as english and then later define the chinese parts, or just define the chinese parts? I'm lost, hopefully someone can help!

                  • 6. Re: Insert chinese font using css?
                    vincentccw Community Member

                    It is because you did not specify the charset=utf-8

                     

                    try inserting this line between the head section:

                     

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                     

                    and I also notice you did not declare your doctypes properly, which you will also include this line(if youare using transition):

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                     

                     

                     

                    so overall your code will be like this:

                    ////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                     

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                    <title>About</title>

                    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />

                    </head>

                     

                     

                     

                    <body>

                     

                    <div id="outer">

                     

                        <div id="wrapper">

                     

                     

                            <div id="banner">

                            <h1 id="chi1">首頁</h1>

                            <h1 id="eng1">Welcome</h1>

                            </div>

                      

                         

                            <div id="topnav">

                                <ul id="left">

                                <li><a href="home.html">HOME</a></li>

                                <li><a href="about.html">ABOUT</a></li>

                                   <li><a href="events.html">EVENTS</a></li>

                                   <li><a href="pictures.html">PICTURES</a></li>

                                    <li><a href="media.html">MEDIA</a></li>

                                <li><a href="contact.html">CONTACT</a></li>

                                </ul>

                          

                                  <ul id="right">

                                 <li><a href="home.html">首頁</a></li>

                                <li><a href="about.html">有關</a></li>

                                <li><a href="events.html">事件</a></li>

                                   <li><a href="pictures.html">照片</a></li>

                                <li><a href="media.html">媒體</a></li>

                                <li><a href="contact.html">連絡</a></li>

                                </ul>

                            </div>

                     

                    /////////////////////////////////////////////////////////////////////////////////////////

                    • 7. Re: Insert chinese font using css?
                      achen08 Community Member

                      Thanks vincent! That solved the problem. The tutorial I've been learning from told me to erase all that stuff for the time being; I guess it was meant to be as least confusing as possible.  But yes, all the characters seem to be showing up now.

                       

                      So does it seem that my code is fine/correct? I set the font in CSS using the tag ID "chi" everytime I need to call for chinese text. Does this seem like the correct method?