I received a message from someone working on their tribute project who was facing an issue with CSS not being properly linked to the HTML file. They had correctly separated the HTML and CSS files but were struggling with fetching the CSS into the HTML. The problem persisted across different editors like VSCode and Atom. Let’s take a closer look at this issue and how to solve it, especially for changing fonts in Quarto HTML.
Common Error Script
Here’s a possible script where CSS fails to fetch into the HTML file, causing the font not to change as expected:
<!-- HTML File -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Tribute Project</h1>
<p>This is my tribute project, but the font is not applying correctly.</p>
</body>
</html>
<!-- styles.css -->
body {
font-family: 'Roboto', sans-serif;
}
The font isn’t applied correctly even though the CSS file contains the font-family rule. This is a common issue when the HTML file is unable to link to the CSS file properly.
Reasons for the CSS Not Working
- Incorrect File Path: The most common reason is that the path to the CSS file in the
<link>tag is incorrect. - CORS Issue: If you’re serving the CSS from a different domain, there might be cross-origin resource sharing (CORS) issues.
- Cache Problems: Sometimes browsers cache files, preventing new changes from being applied.
- Quarto YAML Configuration Issues: In Quarto projects, ensure the YAML header has proper settings to include custom CSS.
Fixed Solution for Changing Fonts in Quarto HTML
Here’s how you can fix this issue and change the document font in Quarto HTML:
- Correct the Path to Your CSS File
First, ensure the path to your styles.css file is correct in the HTML file. For example, if the CSS file is in the same directory as your HTML, the path should be as follows:
<link rel="stylesheet" href="styles.css">
If the CSS file is located in a folder (e.g., assets/css), make sure the path reflects this:
<link rel="stylesheet" href="assets/css/styles.css">
- Apply a Google Font
If you’re using a Google Font like ‘Roboto’, add the following line inside the <head> of your HTML file:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
And then ensure your CSS has the correct font-family rule:
body {
font-family: 'Roboto', sans-serif;
}
- Check Your Quarto YAML Settings
If you’re working with a Quarto project, make sure the YAML header in your .qmd file is configured to include the custom CSS file:
---
title: "My Project"
format:
html:
css: styles.css
---
This ensures that Quarto properly links the external CSS file when rendering the HTML document.
- Clear Browser Cache
Sometimes, the issue may not be related to the code but to your browser caching the old CSS file. Clear your browser cache and reload the page to see the changes.
Example of a Fixed Script
<!-- HTML File -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<h1>My Tribute Project</h1>
<p>This is my tribute project with the correct font applied.</p>
</body>
</html>
<!-- styles.css -->
body {
font-family: 'Roboto', sans-serif;
}
Best Practices for Linking CSS in HTML
- Use Correct File Paths: Always ensure the correct path to the CSS file.
- Test in Multiple Browsers: Some issues might not appear in all browsers, so it’s a good idea to test across different platforms.
- Use External Fonts Carefully: If you’re using external fonts like Google Fonts, ensure you’ve included the necessary
<link>tag to avoid missing fonts. - Avoid CORS Issues: Ensure that your CSS file is accessible from the same domain or that CORS policies are correctly configured if the file is hosted elsewhere.
Conclusion
Changing the document font in Quarto HTML or any HTML project is straightforward once you’ve ensured the CSS is correctly linked. By following the above steps, you can easily apply fonts like ‘Roboto’ or others and resolve common issues like incorrect file paths or caching problems. Make sure to test your project across different browsers to confirm everything is working as expected.