font-face가 어떤 브라우저에서 작동하지 않습니다.

Question

반응 애플리케이션 용 글꼴 렌더링에 문제가 있습니다. 내가 뭘 잘못하고 있는지 확실하지 않습니다. 나는 내 프로젝트에서 font-face를 사용하고있다. 이것은 내 font.styl 파일입니다

모든 글꼴은 공개 디렉터리에 있습니다.

font.styl

@font-face 
    font-family 'museo_sans700' 
    src url('/public/fonts/museosans_0-webfont.woff2') format('woff2') 
     url('/public/fonts/museosans_0-webfont.woff') format('woff') 
    font-weight normal 
    font-style normal 

@font-face 
    font-family 'museo_sans300' 
    src url('/public/fonts/museosans-300-webfont.woff2') format('woff2') 
     url('/public/fonts/museosans-300-webfont.woff') format('woff') 
    font-weight normal 
    font-style normal 

@font-face 
    font-family 'museo_sans500' 
    src url('/public/fonts/museosans-webfont.woff2') format('woff2') 
     url('/public/fonts/museosans-webfont.woff') format('woff') 
    font-weight normal 
    font-style normal 

@font-face 
    font-family 'montserratregular' 
    src url('/public/fonts/montserrat-regular-webfont.woff2') format('woff2') 
     url('/public/fonts/montserrat-regular-webfont.woff') format('woff') 
    font-weight normal 
    font-style normal 

그리고 이것은 내 base.styl이

@import './bs-custom.styl' 
@import './fonts.styl' 

html 
    width 100% 
    height 100% 

body 
    width 100vw 
    min-height 100vh 
    transition all 0.2s ease 
    background-color #F0F0F0 

    color theme_text 
    font-size 14px 
    font-weight 400 
    font-family museo500 

    overflow hidden 

이다는

{ 
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'url-loader?limit=100000&mimetype=application/font-woff' 
      }, 

글꼴이 아닌 내가 config 파일에서 사용하고있는 로더 하지만 나타납니다.

Answer 1

나는 그것에 버그가 있습니다. src url 뒤에 쉼표가 누락되었습니다 (...)

src url('/public/fonts/museosans_0-webfont.woff2') format('woff2'), 
     url('/public/fonts/museosans_0-webfont.woff') format('woff')