Creating a unique and attractive website often starts with typography. Using Jekyll, a popular static site generator, combined with Google Fonts allows you to easily customize your site's appearance. This guide will walk you through the steps to integrate Google Fonts into your Jekyll project.
Step 1: Choose Your Google Font
Visit the Google Fonts website to browse and select a font that suits your website's style. Once you've chosen a font, customize the styles (such as regular, bold, italics) and copy the provided embed link.
Step 2: Add the Font Link to Your Jekyll Site
Open your Jekyll project's _includes folder and locate the head.html file. Paste the Google Fonts <link> tag within the <head> section so that it loads on every page. For example:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
Step 3: Apply the Font in Your CSS
Open your main stylesheet, typically assets/css/style.css. Use the font-family property to apply the Google Font to your site elements. For example:
body {
font-family: 'Open Sans', sans-serif;
}
Step 4: Customize Your Typography
You can further customize your typography by applying different fonts to headings, navigation, or specific sections. Use CSS selectors to target these areas. For example:
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
}
Benefits of Using Google Fonts with Jekyll
- Customization: Choose from hundreds of fonts to match your brand or style.
- Performance: Google Fonts are optimized for fast loading.
- Ease of Use: Simple integration with minimal code.
- Consistency: Ensures your typography looks the same across different browsers and devices.
Conclusion
Integrating Google Fonts into your Jekyll site enhances its visual appeal and readability. By following these steps, you can easily add unique typography that sets your website apart. Experiment with different fonts and styles to create a distinctive look for your project.