Edit in JSFiddle

<div class="articlewrapper">
<h3>Google Webfonts - Noto Sans TC (Chinese Traditional) - Demo</h3>
    <div class="articlebody">
        <h1 class=""> 香港 </h1>
        <p class="p1"> 香港(簡稱:港,雅稱:香江;英語:Hong Kong,縮寫:HK)是中華人民共和國兩個特別行政區之一,位於南海北岸、以及珠江口東側,北接廣東省深圳市,西隔珠江與澳門及廣東省珠海市相望,其餘兩面與南海鄰接。全境由香港島、九龍、新界等3大區域組成,其中香港島是全港的發展核心;地理環境上則由九龍半島等大陸土地、以及263個島嶼構成,人口約723萬人。

公元前214年,香港被秦朝納入中原王朝版圖,此後長期為中國領土,也曾短暫納入廣東越南地區版圖,亦曾建立過本土政權。
        <br/>
        字重有7種(Thin 100、Light 300、DemiLight 350、Regular 400、Medium 500、Bold 700、Black 900)
        </p>
        <h2 class=""> 香港人口 </h2>
        <p class="p2"> 香港人口密度每年上升,根據2011年官方數據指出,香港的人口密度全世界第3。截至2014年年中,香港人口7,241,700人,男性3,345,100人,女性3,896,600人:10。大部分香港人都住在高樓大廈,近十年興建的住宅樓宇多在30至40層以上,部份更達70層,商業大廈可達約100層。而且,一個四人家庭普遍只能居住或擁有面積在400至1000平方英呎(約37.2至74.3平方公尺,12.3至30.7坪)的空間[n][174]。正因如此,香港在高人口密度的同時,仍然保留大量未開發的郊野土地。
        <br/>
        字重有7種(Thin 100、Light 300、DemiLight 350、Regular 400、Medium 500、Bold 700、Black 900)
        </p>
        <h3 class=""> 文字 ( 主條目:香港語文、繁體中文和粵語白話文 ) </h3>
        <p class="p3"> 港英時代,英文長期是香港唯一法定語言;直至1971年,中文才定為另一種法定語言。兩種語文並行地位,是依據《香港法例》第5章《法定語文條例》而確立。

1997年香港主權移交後,中文和英文仍是香港法定語言。香港特區政府在主權移交後,實行「兩文三語」語文教育政策,培育學生具有書寫中文和英文的能力,並能使用廣東話、英文和普通話談話溝通。香港日常使用的中文以繁體中文為主,大部分香港本地的報章和雜誌都以繁體字印製。隨着香港與中國大陸的交流增加,香港人對簡體中文的認識也因此提高,並增加簡化字的應用。
        <br/>
        字重有7種(Thin 100、Light 300、DemiLight 350、Regular 400、Medium 500、Bold 700、Black 900)
</p>
        <h4 class=""> 教育 </h4>
        <p class="p4"> 香港最早記載的學校是錦田的力瀛書院,1075年由北宋進士鄧符協所建這類書院和書室屬於私人學校,教授《四書》和《五經》,然後在英國統治時期逐漸轉變為鄉村學校或者公立學校。

英國接管香港後,在香港發展和英國相似的教育制度,設立多間官立小學和中學,以英文授課,並在1910年成立香港首間大學香港大學培訓學術人才;香港發展至今共有9所法定大學,包括7間大學教育資助委員會資助的大學、1間自資的公立大學(香港公開大學)及1間私立大學(香港樹仁大學),2間法定學院和6間認可專上學院。 
        <br/>
        字重有7種(Thin 100、Light 300、DemiLight 350、Regular 400、Medium 500、Bold 700、Black 900)
</p>
    </div>
</div>
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

body {
    background-color:#fff;
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-size:14px;
    color:#333;
}

.articlewrapper {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
    position: relative;
    padding: 15px;
}

.p1 { font-weight: 500; }
.p2 { font-weight: 400; }
.p3 { font-weight: 300; }
.p4 { font-weight: 200; }