TTF Font File not found

Support
1

Issue Summary

I’m developing a site in Local and I have a ttf font file downloaded on my computer. However, there is an error message on the Console explaining that the font file isn’t found.

This isn’t a problem in local development, and I think the fix will be to edit the wp.config file when the site is hosted. But if I use the Live Link the font doesn’t load.

Troubleshooting Questions

  • Is there a way to edit the config file of the local server?

  • Or is there another workaround where I can display the font when using the Live Link?

System Details

  • Which version of Local is being used? Version 6.4.1

  • What Operating System (OS) and OS version is being used?

    • Windows 10 Professional
2

Hi @hyphencoding - welcome to the Local Community! :wave:

Thank you for bringing your question here.

When you’re using the font, are you using the full URL or just the relative URL?

(ie: example.com/heres-my-link versus /heres-my-link)

I’m wondering if you’re using the full URL and then with Live Links enabled it’s not seeing that file.

Let me know if that makes sense,

Sam :woman_technologist:t3:

3

Hi Sam,

Thanks for your response.

I’m using relative URLs, but I’ve also tried adding full URLs with the live link address too.

I have to be honest and say I’m not overly familiar with font-face and setting it up.

Here’s what I’ve got:

@font-face {
   font-family: 'Madelyn';
   src:  local('/assets/fonts/webfontkit/madelyn-webfont.woff') format('font-woff'),
         local('/assets/fonts/webfontkit/madelyn-webfont.woff2') format('font-woff-2'),
         local('/assets/fonts/Madelyn.ttf') format('truetype'),
         url('/assets/fonts/webfontkit/madelyn-webfont.woff') format('font-woff'),
         url('/assets/fonts/webfontkit/madelyn-webfont.woff2') format('font-woff2'),
         url('/assets/fonts/Madelyn.ttf')  format('truetype'),
         url('https://futuristic-run.localsite.io/wp-content/themes/wmjg/assets/fonts/webfontkit/madelyn-webfont.woff') format('font-woff'),
         url('https://futuristic-run.localsite.io/wp-content/themes/wmjg/assets/fonts/webfontkit/madelyn-webfont.woff2') format('font-woff2'),
         url('https://futuristic-run.localsite.io/wp-content/themes/wmjg/assets/fonts/Madelyn.ttf') format('truetype');

   font-weight: normal;
   font-style: normal;

 }

I’m not sure if I’m completely messing it up by using multiple sources like that?

Nick