web开发中，字体是一个很重要的方面，为了达到较好的视觉效果，很多时候我们需要自定义我们网页的字体，而这些字体可能在用户的操作系统上没有，那应该怎么做呢？
工具/原料
1
chrome浏览器（或者其他主流浏览器）
2
web开发工具
方法/步骤
1
首先创建两个文件 web-font-start.html 和 web-font-start.css，作为我们的演示代码，初始代码如图：
2
然后到字体网站上面下载你需要的字体（或者实际开发中要使用的字体，这里要注意的是，要确保你已经获得了你即将使用的字体的合法版权），我这里是从https://everythingfonts.com/fonts/#上面随便下载了两个字体：Beyond Wonderland.ttf和good times rg.ttf
3
接下来就是生成所需要的代码，打开https://www.fontsquirrel.com/tools/webfont-generator，然后将你选择的字体文件上传上去，勾选同意协议条款，然后下载所需的工具包，得到一个zip文件
4
将zip文件解压到和web-font-start.html 和 web-font-start.css同一目录下，并修改文件夹名称为fonts（其他的也可以，但是要和后面引用字体的url路径一致），第二张图是kit包里面的内容
6
最后就可以在css中和一般的font-family一样使用我们手动添加的good_timesregular和beyond_wonderlandregular字体了
7
打开浏览器查看效果，可以看到和最初的页面的字体有着明显的区别，说明添加自定义字体成功！
注意事项
如果决定有帮助的话，不妨点给作者投个票吧