CherryFramework 4. 如何添加自定义字体

Hello! 本视频教程展示了如何添加 custom font in CherryFramework 4 templates.

CherryFramework 4. 如何添加自定义字体

中不包含的其他字体可能需要添加 framework of your site.

让我们来学习如何做到这一点.

1. 使用你最喜欢的搜索引擎找到免费的网站 webfonts, e.g. http://www.fontsquirrel.com :

   

2. 选择适合你的字体并下载到你的机器上:

   

3. Then, navigate to http://www.font2web.com/ site and click “Browse…” 按钮以选择下载的字体文件. 确保字体类型是 TTF(真实字体) or OTF(开放式字体):

   

4. 上传字体文件后，单击 “转换及下载” 下载转换后的字体到您的机器的按钮:

   

解压下载的文件，转换后的字体包具有以下结构:

We will need “fonts” folder and fonts.css file only.

1. Access your FTP/hosting control panel File Manager and navigate to / / wp-content /主题/ themeXXXXX /资产 directory, where themeXXXXX is your child theme name.

2. 上传最近下载 “fonts” folder to /assets/ directory.

现在字体已经上传到您的站点，您应该在管理面板中添加对它的引用.

1. Open the fonts.css 文件从任何文本中转换的字体包 editor, e.g. Notepad++, Sublime Text 2, etc.:

   

2. Change the url() attributes from 的字体/ Conv_Allura-Regular.xxx’ to 资产/字体/ Conv_Allura-Regular.xxx’ 通过在开头添加资产:

   

3. Then log into your WordPress dashboard and navigate to Appearance ->Editor:

   

4. 复制之前修改的内容 fonts.css 文件代码并将其粘贴在出现的 style.css file:

@font-face {
	字体类型:“Conv_Allura-Regular”;
	src: url(资产/字体/ Conv_Allura-Regular.eot');
	src: local('☺')，url('assets/fonts/Conv_Allura-Regular ').woff')格式('woff')， url('assets/fonts/Conv_Allura-Regular.格式('truetype')， url('assets/fonts/Conv_Allura-Regular ').svg的)格式(svg);
	粗细:正常;
	字体样式:正常;
}

你会有自己的字体名称，而不是“Conv_Allura-Regular”.

现在，假设你想应用新添加的字体 h5 网站上的标题.

为了做到这一点，在前面添加的代码的正下方添加以下代码:

h5 { 
  字体类型:Conv_Allura-Regular !important;  
}

Pay attention to !important 声明，它被添加到 CSS rule to overwrite already existing 字体类型属性 for h5 titles:

Click the “Update File” 按钮以应用更改.

导航到站点前端并刷新页面以查看更改.

你可以看到的字体 h5 标题被替换为您的自定义字体.

这是本教程的结尾，您已经学习了如何在您的 Cherry Framework 4 template.

请随时查看下面的详细视频教程:

CherryFramework 4. 如何添加自定义字体