font-face不适用于托管服务提供商

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;
        }

Answer 1

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.