font-face不适用于托管提供商 [英] font-face doesn't work on hosting provider

问题描述

我在托管一个网站时遇到了问题：在托管之前，当我在本地计算机上运行网站时，字体很好，但托管时字体不起作用。 （我在我的网页上使用pdf的字体，并使用dompdf转换为pdf）

这里的代码：

  / * 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）格式（'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）格式（'woff2'）; 
 unicode-range：U + 0000-00FF，U + 0131，U + 0152-0153，U + 02C6，U + 02DA，U + 02DC，U + 2000-206F，U + 2074，U + U + 2212，U + 2215; 
} 
 
 
 
 p.serif {
 font-family：'Great Vibes'; 
 font-size：70px; 
 padding-top：250px; 
} 
  

解决方案

您的托管提供商的Web服务器确实（可能）未发送正确的 Content-Type



你，该主题还有许多其他内容。

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

解决方案

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.

这篇关于font-face不适用于托管提供商的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！