Custom font not showing up in certain versions of Chrome

[danielleallyssa]

Hi,

I have been struggling with this for weeks, but I'm working on a site and my custom font's aren't showing up on certain versions of Chrome. This is how it's set up, but it's strange because it is working in most browsers (including Chrome). The versions that we're having issues with is Chrome 127 (but even then, it works sometimes). 

Any help or insight is appreciated. I feel like I have tried everything.

Thanks!

@font-face {
    font-family: "Cosmica-Book";
    src: url("{{ 'Cosmica-Book.eot' | file_url }}") format('embedded-opentype'),
      url("{{ 'Cosmica-Book.woff2' | file_url }}") format('woff2'),
      url("{{ 'Cosmica-Book.woff' | file_url }}") format('woff'),
      url("{{ 'Cosmica-Book.ttf' | file_url }}") format('truetype'),
      url("{{ 'Cosmica-Book.svg' | asset_url }}") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

[shahrozbabar5]

Hi @danielleallyssa, it seems you added custom fonts correctly but still need enhancement as follows

Font rendering issues can be tricky, especially with older or specific browser versions. Here are a few steps and tips you can try to resolve the issue:

1. **Check the file paths:**
Ensure that the paths to your font files are correct and that the files are accessible. Sometimes, incorrect file paths can cause the font to not load properly.

2. **Use absolute URLs:**
Try using absolute URLs instead of relative URLs for the font files to avoid any path-related issues.

3. **Ensure proper MIME types:**
Make sure your server is serving the font files with the correct MIME types. For example, `.woff` should be served as `font/woff`, `.woff2` as `font/woff2`, etc.

4. **Cache invalidation:**
Clear your browser cache or try loading the page in incognito mode to rule out any caching issues.

5. **Font format prioritization:**
Sometimes, reordering the font formats can help. Browsers prioritize font formats differently, and some may prefer `.woff2` over `.woff` or vice versa.

6. **Cross-origin resource sharing (CORS):**
Ensure that your server is configured to allow cross-origin requests for your font files.

7. **Use the `@font-face` rule correctly:**
Double-check your `@font-face` declaration for any syntax errors. Here is an example with a slight modification:

```css
@font-face {
font-family: 'Cosmica-Book';
src: url('{{ "Cosmica-Book.eot" | file_url }}') format('embedded-opentype'), /* IE9 Compat Modes */
url('{{ "Cosmica-Book.woff2" | file_url }}') format('woff2'), /* Super Modern Browsers */
url('{{ "Cosmica-Book.woff" | file_url }}') format('woff'), /* Pretty Modern Browsers */
url('{{ "Cosmica-Book.ttf" | file_url }}') format('truetype'), /* Safari, Android, iOS */
url('{{ "Cosmica-Book.svg#Cosmica-Book" | file_url }}') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
font-display: swap;
}
```

8. **Fallback fonts:**
Add a fallback font stack to your CSS in case the custom font fails to load. This ensures that your text remains readable.

```css
body {
font-family: 'Cosmica-Book', Arial, sans-serif;
}
```

9. **Browser-specific issues:**
Since you're having issues with a specific Chrome version (127), it might be a browser-specific bug. Check Chrome's developer tools console for any errors or warnings related to font loading.

10. **Font file validity:**
Verify that the font files themselves are not corrupted and are valid font files. You can try re-uploading them or using different font files to see if the issue persists.

If none of these steps resolve the issue, consider testing your site on BrowserStack or a similar service to replicate the problem in different environments. This can help identify if the problem is isolated to specific browser versions or configurations.

[shahrozbabar5]

Hi @danielleallyssa, if you still need assistance, DM , I'll do this custom font fix for you