Incorporating @font-face webfonts into a Jekyll project

Question

Incorporating @font-face webfonts into a Jekyll project

I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters worse, the console spits out an error message saying

Failed to load resource: the server responded with a status of 404 ()

for each missing font.

The _site directory has the following structure:

assets/css/style.css
fonts/ <-- all my .woff files are located here
index.html

Inside the index.html file, the CSS file is referenced like this:

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

This is how the @font-face declaration looks like:

@font-face {
  font-family: 'My font';
  src:  url('../../fonts/myfont.woff2') format('woff2'),
        url('../../fonts/myfont.woff') format('woff');
}

Should I include any specific configurations in the _config.yml file to ensure that the webfonts display correctly?

html css fonts jekyll webfonts

Answer 1

Answer №1

It's finally up and running! The key is to place the font files directly in the root directory for it to function properly. Once that's done, these files should be moved into the root of the _site directory during the build process.

For clarity, here's a visual representation:

Before:

my-jekyll-theme/assets/css/style.css
my-jekyll-theme/myfont.woff
my-jekyll-theme/myfont.woff2
my-jekyll-theme/index.html

After building:

_site/assets/css/style.css
_site/myfont.woff
_site/myfont.woff2
_site/index.html

The @font-face declaration should point to the font files located at the root directory:

@font-face {
  font-family: 'My font';
  src:  url('../../myfont.woff2') format('woff2'),
        url('../../myfont.woff') format('woff');
}

Ensure the same CSS reference is present inside index.html:

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

There may be a more efficient way to handle this within Jekyll, but I have yet to discover it.

Answer 2

It's finally up and running! The key is to place the font files directly in the root directory for it to function properly. Once that's done, these files should be moved into the root of the _site directory during the build process.

For clarity, here's a visual representation:

Before:

my-jekyll-theme/assets/css/style.css
my-jekyll-theme/myfont.woff
my-jekyll-theme/myfont.woff2
my-jekyll-theme/index.html

After building:

_site/assets/css/style.css
_site/myfont.woff
_site/myfont.woff2
_site/index.html

The @font-face declaration should point to the font files located at the root directory:

@font-face {
  font-family: 'My font';
  src:  url('../../myfont.woff2') format('woff2'),
        url('../../myfont.woff') format('woff');
}

Ensure the same CSS reference is present inside index.html:

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

There may be a more efficient way to handle this within Jekyll, but I have yet to discover it.

Incorporating @font-face webfonts into a Jekyll project

Answer №1

Similar questions

Creating a border with tabs and a triangle using CSS

Tips on verifying if user x has sent over two messages in the chat and concealing their identity

Using Jquery to load a css background image with a loader

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

How can I dynamically unload a JavaScript file that was previously loaded with RequireJS? Alternatively, how can I handle exclusive dependencies or reset RequireJS?

What is the best way to showcase additional fields from a custom post type along with the featured thumbnail feature?

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

What is the method for implementing a dropdown box with select and non-select checkboxes, similar to the example shown in the image, using AngularJS?

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

Keeping the color of CSS buttons consistent can be achieved by setting specific

Activate the dropdown menu when ul element is in focus

Error occurred during download or resource does not meet image format requirements

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

Manage the placement of elements using CSS

My jQuery code seems to be in order, so why isn't it working as expected?

"Utilize Selenium to navigate and select a menu option with a

The card-group is off-center within the column

Issue with Submit Button Functionality in Django Form Submission

What is the reason behind Material UI's decision to utilize display flex instead of display grid?

Inject customized CSS following third-party plugin stylesheets in WordPress