[英]How do I add a Google font to a jekyll theme
我有一个使用最小主题的简单 jekyll 网站: https://github.com/WesPeacock/simplesite以下是该网站的简单index.md文件的样子:
---
layout: home
---
# A Simple site for testing stuff
The next two lines should be in different fonts
* This bullet point is in the default minima font. The next point should be in Google Gentium Basic web font
* <span class="nkonya">Nɔ́pʋ Gugɛl Gyɛntiam Besɩk wɛbfɔnt wanlɩn ɩ́nɩ.</span>
This is on the Home Page.
我对 jekyll 和 css/sass/scss 的了解还不足以让魔法发生,因此来自 Google API 的 Gentium Basic 字体将应用于我用 <span>...</span> 标记的代码.
如果有比使用 <span class...> 标记更好的解决方案,那很好。
我发现的大多数答案都涉及替换基本字体。 我不想那样做,只需添加一种字体并有一种相当简单的方法来应用该字体。
这很容易。 您需要覆盖_includes
中的head.html
文件。 如果您还没有这样做,请从此处的 minima 主题存储库复制它https://github.com/jekyll/minima/blob/master/_includes/head.html并在<head>
和</head
之间添加以下行:
<!-- fonts -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Arvo">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">
使用您当然选择的 fonts 更换 Arvo 和 Raleway。
然后你需要覆盖 CSS。你可以创建一个css/override.css
文件并将你的 fonts 添加到样式中,例如以下将默认使用 Raleway,Arvo 用于所有标题和所有元素 class.site-title and.site-nav. 要在特定元素中使用 fonts,您需要了解一些有关 CSS 的知识,但没有什么是您无法通过 google 轻松找到的。
body {
font-family: 'Raleway', serif;
}
h1, h2, h3, h4, h5, .site-title, .site-nav {
font-family: 'Arvo', sans-serif;
}
然后你将这个 CSS.Go 加载回你的head.html
文件,并将此行包含在<head>
标签内,在你在那里找到引用的任何其他 CSS 样式之后(文件加载的顺序很重要)
<link rel="stylesheet" href="{{ site.baseurl }}/css/override.css" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.