font-face doesn't work on hosting provider

Question

I have problem when I am hosting a web site: before hosting when i run web site locally in my computer the font was fine, but when hosting it, font doesn't work. (I use font for pdf on my web page, and i use dompdf to convert to pdf)

Here the code:

        /* latin-ext */
        @font-face {
          font-family: 'Great Vibes';
          font-style: normal;
          font-weight: 400;
          src: local('Great Vibes'), local('GreatVibes-Regular'), url(./asset/fonts/font-sertifikat/sertifikat.woff2) format('woff2');
          unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
          font-family: 'Great Vibes';
          font-style: normal;
          font-weight: 400;
          src: local('Great Vibes'), local('GreatVibes-Regular'), url(./asset/fonts/font-sertifikat/sertifikat4.woff2) format('woff2');
          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
        }



        p.serif {
            font-family: 'Great Vibes';
            font-size: 70px;
            padding-top: 250px;
        }

You probably do not have the fonts installed on the server but you do have them installed on your local machine. — Peter M, May 14 '17 at 11:50
Have you tried adding the font with the library? See https://github.com/dompdf/dompdf/wiki/Features and https://github.com/PhenX/php-font-lib — Peter M, May 14 '17 at 11:56
have you checked the path `url(./asset/ ` ? try to put 1) complete 2) relative path and see what it does — OldPadawan, May 14 '17 at 12:04
@OldPadawan yeah i try it but it still doesn't work, i use this too but still doesn't work, but when i use on localy it's work fine. — Firm, May 14 '17 at 12:10
@PeterM i don't understand hot to use that, can you give me an example? — Firm, May 14 '17 at 12:10
what about `@import url('https://fonts.googleapis.com/css?family=Great+Vibes');` on top of your CSS ? then `p.serif { font-family: 'Great Vibes'; }` — OldPadawan, May 14 '17 at 12:12
@OldPadawan yeah i already do that, and it just work when i run localy but when i hosting it the font still doesn't work. — Firm, May 14 '17 at 12:17
have you checked for errors in console ? where do you try calling the fonts ? in the HTML output that will be served to PDF or in the PDF settings ? — OldPadawan, May 14 '17 at 12:31
yes i have been checked, but nothing error :( i calling the font on html. this html will be convert on dompdf — Firm, May 14 '17 at 12:34
there is only css here and the question does not support any of the other tags — Funk Forty Niner, May 14 '17 at 13:09
if this is a path-related issue (for the php) and the CI tag, then check for errors. I can't see how client-side code would not work on any host/server/machine. Voting to close. — Funk Forty Niner, May 14 '17 at 13:12
I think it's an http header issue, see my answer for details. But I agree most tags should be removed... — Hugues M., May 14 '17 at 13:30

score 0 · Answer 1 · edited May 23 '17 at 12:34

0

The web server for your hosting provider does (probably) not send the correct Content-Type header for the fonts, and as a result your browser refuses to load them.

You need proper content type headers for fonts to work.

Can you inspect the response headers for the .woff2 files in the 'Networking' tab of your browser's dev tools?

If it's indeed missing (compare headers with local hosting), that's the problem. You need to get that server to insert http header Content-Type: font/woff2(*). And that will depend on your hosting provider. Maybe some will allow to do that in a .htaccess that you can install yourself in your site.

(*) edited: previous suggestion was application/font-woff2. See this answer, there are many others on that topic.

edited May 23 '17 at 12:34

Community

1
1

answered May 14 '17 at 12:44

Hugues M.

19,846
6
37
65

i already inspect the response headers for the .woff2 files in the 'Networking' tab of my browser's, but i cann't find error – Firm May 14 '17 at 12:54
Don't look for an error. What is the value for `Content-Type` when it fails (hosted)? And what is the value when it works? – Hugues M. May 14 '17 at 12:56
i cann't find content-type, i have been search on inpect in the 'Networking' tab of my browser's but i cann't find it – Firm May 14 '17 at 13:10
I added a working example from [google fonts page](https://fonts.google.com/). There must be a content-type header in the **Response Headers** section. What are the values you see, in both cases (working and not working) ? – Hugues M. May 14 '17 at 13:19
I asked you twice to tell us what you see in both cases. You show us a screenshot of 1 case without specifiying which, and that screenshot shows references to fonts that are *not in your CSS*. You do not provide consistent details, so I will stop trying until I see meaningful/relevant/consistent info. I had that problem in the past, it was exactly as I described in my answer. Good luck. – Hugues M. May 14 '17 at 13:41

font-face doesn't work on hosting provider

1 Answers1

Linked