GOOGLE免費字體 Noto Sans TC思源黑體 BLOGGER安裝 套用記錄

時間：

我的網誌最近剛開設  所以很多東西都還在調整設定的階段

BLOGGER本身的主題樣式大多數可以透過設定做調整

不過字體的部分都只有針對英文字的顯示

中文的話預設顯示都是新細明體   感覺有點單調而且單薄

本來是想要改用微軟正黑體   但好像不一定每台電腦都能顯示

並且也沒有確定微軟正黑體是可以商用的   

考量到以後可能會掛廣告開盈利等狀況

雖然微軟很少在抓小蝦米 但還是預先避免比較好

於是找到了跟微軟正黑體其實長的蠻像的思源黑體(Noto Sans TC)

GOOGLE字型官網連結    

網路上其實有很多篇 教大家如何將額外的字型載入BLOGGER的文章

隨便下關鍵字 "思源黑體 BLOGGER" 就可以找到五六篇教學

但是有些文章年代久遠  或者方法不管用  

甚至還有只教你如何載入卻沒教你如何套用講一半的

還好經過我的一番摸索 還有我女朋友(多年網頁工程師)的提點  

最後終於成功套用了 如現在我的網誌所顯示

以下是將思源黑體套用至BLOGGER的步驟

  1. 首先點選進入    GOOGLE字型官網連結     並選擇"Noto Sans Traditional Chinese"
    並將頁面向下拉至STYLE的部分(如下圖)
    Noto Sans Traditional Chinese網頁的STYLE區塊
  2. 針對你想要的格式點選右側的" + Select this style"按鈕
    (這邊以"Regular 400"為例)
    並點選右上角的方塊圖型(如下圖)顯示"Selected family"側欄
    Selected family按鈕
  3. 在"Selected family"側欄中的"Use on the web"區塊點選<link>方法
    並且複製下方區域顯示的三行程式碼 
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">
  4. 這三行必須先貼到空白的文件中修正一些字元
    以免在後續儲存修改完成的HTML時出現錯誤訊息
    首先在每一行後面加入</LINK>做結尾
    並且在第二行的   crossorigin 後面加入空值變成   crossorigin="" 
    最後把第三行的&符號改為&amp;
    修改完成的程式碼如下
    <link rel="preconnect" href="https://fonts.googleapis.com"></link>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""></link>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap" rel="stylesheet"></link>
  5. 進入BLOGGER後台 點選"主題">>"自訂"旁的箭頭>>編輯HTML 
    找到在HTML檔案中的</head>標籤
    並且將改好的三行程式碼貼到</head>的上方(如下圖)貼上HTML的程式碼
    並點選右上角的儲存將修改完成的HTML存檔
    至此已經完成了思源黑體的安裝

  6. 回到   GOOGLE字型官網連結   再次將"Selected family"側欄中
    "CSS rules to specify families"下方的那行程式碼複製
    並於空白文件中修改成下方狀態後再次複製
    *{
        font-family: 'Noto Sans TC', sans-serif !important;
    }
    最後面的  !important  參數是為了提高權限 不讓字體被其他設定給覆蓋
    這部分就是我女朋友提點我的  直接複製原本那行貼入會沒有作用

  7. 進入BLOGGER後台   點選"主題">>"自訂">>"進階">>"加入CSS"
    將修改完的程式碼貼入"新增自訂的CSS"(如下圖)
    把修改完的程式碼貼入新增CSS
最後點選畫面右下角的儲存按鈕，就大功告成啦~
收錄於

留言

張貼留言