1.下載字體：
（e.g.網(wǎng)站）https://fonts.google.com/?selection.family=Merriweather|Roboto|Slabo+27px
2.將下載的字體ttf格式轉成多種格式（以便于各個瀏覽器兼容）靴跛，
（e.g.）轉換字體網(wǎng)站：http://www.freefontconverter.com/#
在本例子中，筆者將字體保存在
保存字體.PNG
3.自定義的一個css文件（上圖中最后一個stylesheet.css文件）砍聊，內容如下：
@font-face {
font-family: 'mynewfont';
src: url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.eot'); /* IE9 Compat Modes */
src: url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.woff') format('woff'), /* Modern Browsers */
url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.ttf') format('truetype'), /* Safari, Android, iOS */
url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.svg') format('svg'); /* Legacy iOS */
}
4.在html中調用：
<!DOCTYPE HTML>
<HTML>
<head>
<link rel='stylesheet' href='C:\Users\123\Desktop\cssfont\erasdust\stylesheet.css' type='text/css'>
<style>
.neuesDemo{font-family:'mynewfont'}
</style>
</head>
<body>
<p class="neuesDemo">Neues Bauen Demo</p>
</body>
</html>
效果如下：
自定義字體3.PNG
另外，也可以在html中加入css，效果一樣（以下分別是絕對路徑和相對路徑）：
自定義字體1.PNG
自定義字體2.PNG
重點提示（筆者自己踩的坑）：
不要偷懶復制文件中的路徑环肘，你復制出來的路徑格式類似于：
C:\Users\123\Desktop\cssfont\erasdust
但是實際上路徑是：
C:/Users/123/Desktop/cssfont/erasdust/
