embedding font does not work

---

Re: [Webfonts](upload works but webfont doesn't work)
@Armin-Unruh
Hi I tried to embed a font that I bought. The .woff file does exist but no browser shows the font. When editing text formats or uploading webfonts it shows the font in the right way. But on the website it does not work.

I have all the files from the typeface: .woff / .ttf /.svg ...
Here is the font: http://www.dafont.com/ogonek.font

Correction: On my computer with chrome it works. But on another computer opened with chrome it does not work.
And it also does not work with opera, firefox, safari

PS.: Is it possible to upload the font folder onto the server? and link it via @font-face in the css?

It would be great if you could help me with that.
link to my site: anneschreier.xyz

Hi annexyz!

Can you send a link to your website?

to you use https?

If yes, you need to add this to your htaccess:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>

Let me know!

Marius

@mariusjopen Hi Marius, thank you for your reply :)! Here is my website link: anneschreier.xyz

What is htaccess? Where can I fand the htaccess in laytheme? Or do I do that with google´s inspector tool?

Thank you very much for your help!

Hi @annexyz

your Console shows a lot of errors. Probably you have some justom javascript or code which causes trouble.

But apart from that I think it is connected to your htaccess.
You use a secure server HTTPS and not the normal one HTTP.
There is a small bug in embedding the font on HTTPS servers.

You need to add the code above int your htacces.

You need to open the files on your FTP server.

You can find the files in the main folder of your Wordpress installation.

Place the code right under:

# BEGIN WordPress
<IfModule mod_rewrite.c>

It is a bit tricky sometimes to open that files but I am sure you can manage.
There are many ways when you google it.

I hope it works well. And if you have questions – let me know!

Best!

Marius

@mariusjopen I had a similar problem. What was strange was one font was working and the other wasn't.

Your suggestion fixed everything. Thank you!

Hi @drchae
happy to hear. In the future we hope not to need that fix anymore.

All the best!

Marius

@mariusjopen said in embedding font does not work:

<FilesMatch ".(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Hi Marius - I have the same problem with Chrome and did try your solution but it doesnt work for me. Any idea?

https://gebhart.dk/wp-commerce

it works fine with Safari, but not in Chrome.

best, Daniel

@gdk
hmm you can always try to delete the font in lay options -> webfonts and set it again