font-face with wrong MIME type in Chrome

后端 未结 5 1898
臣服心动
臣服心动 2020-11-27 16:06

This is the @font-face declaration I have used:

@font-face {
    font-family: SolaimanLipi;
    src: url         


        
相关标签:
5条回答
  • 2020-11-27 16:31

    As usual, different browsers have different needs. Here is a cross browser @fontface declaration, taken from the Paul Irish blog -

    @font-face {
      font-family: 'Graublau Web';
      src: url('GraublauWeb.eot');
      src: local('☺'),
             url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
    }
    

    .eot is for IE, the rest of the browsers use either .woff or .ttf If you need to generate the different types from the source font, you can use Font Squirrel's font-face generator

    You also need to an .htaccess to the location of the fonts adding the following types:

    AddType application/vnd.ms-fontobject .eot
    AddType font/ttf .ttf
    AddType font/otf .otf
    AddType application/x-font-woff .woff
    
    0 讨论(0)
  • 2020-11-27 16:31

    Your font files are not being trasferred with the proper MIME type. This is a web server configuration issue that can easily be fixed.

    For nginx, merge this with existing types config, usually found in the /etc/nginx directory:

    types {
        application/vnd.ms-fontobject    eot;
        application/x-font-woff    woff;
        font/otf    otf;
        font/ttf    ttf;
    }
    

    For Apache, add these lines to .htaccess found in your Document Root:

    AddType application/vnd.ms-fontobject .eot
    AddType font/ttf .ttf
    AddType font/otf .otf
    AddType application/x-font-woff .woff
    
    0 讨论(0)
  • 2020-11-27 16:52

    if you can edit an .htaccess file you should try add

    addType font/ttf .ttf
    

    otherwise you could use a svg/svgz font instead

    0 讨论(0)
  • 2020-11-27 16:53

    If you run a server with nodeJS, this is a nice module to map your mime types

    https://github.com/broofa/node-mime

    0 讨论(0)
  • 2020-11-27 16:54

    You can ignore the warning and may want to consider this post on the topic, Proper MIME type for fonts

    Which also mentions the following:

    "Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered."

    source: http://developer.mozilla.org/en/css/@font-face

    0 讨论(0)
提交回复
热议问题