Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

Website custom font not rendering all letters correctly in Firefox 75.0

  • 2 답장
  • 2 이 문제를 만남
  • 4 보기
  • 최종 답변자: karlo_kelis

more options

I have a website with custom font that is stored locally on server, and is defined in CSS file: @font-face {

   font-family: 'quicksandlight';
   src:  url('/static/fonts/Quicksand-VariableFont_wght.ttf') format('truetype'),
         url('/static/fonts/quicksand-variablefont_wght-webfont.woff2') format('woff2'),
         url('/static/fonts/quicksand-variablefont_wght-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

} Chrome is showing all letters in this font, and Edge and Firefox are showing most letters correct, but not B, D, T, P, R and X. What I know is that this is only happening on words that have "font-weight: bold" or "font_weight: 600", when it's set "font-weight: 400" all letters are renderd correctly. This is bugging me af, and if somebody can help to fix this, without need to change to lower font-weight, I would appreciate it.

I have a website with custom font that is stored locally on server, and is defined in CSS file: @font-face { font-family: 'quicksandlight'; src: url('/static/fonts/Quicksand-VariableFont_wght.ttf') format('truetype'), url('/static/fonts/quicksand-variablefont_wght-webfont.woff2') format('woff2'), url('/static/fonts/quicksand-variablefont_wght-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } Chrome is showing all letters in this font, and Edge and Firefox are showing most letters correct, but not B, D, T, P, R and X. What I know is that this is only happening on words that have "font-weight: bold" or "font_weight: 600", when it's set "font-weight: 400" all letters are renderd correctly. This is bugging me af, and if somebody can help to fix this, without need to change to lower font-weight, I would appreciate it.

선택된 해결법

Do you have specific @font-face rules for heavier weights? For example:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Open Sans'), local('Open Sans Regular'), local('OpenSans-Regular'), url(fonts/opensans.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/opensansbold.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;
}

According to MDN, bold generally equates to font-weight: 700, so browsers may be improvising with font-weight: 600. You might need to add a few more rules to help browsers that aren't improvising as successfully.

But I'm most definitely not an expert on on fonts. We have this article if the forum isn't able to get to the bottom of it: Where to go for developer support.

문맥에 따라 이 답변을 읽어주세요 👍 1

모든 댓글 (2)

more options

선택된 해결법

Do you have specific @font-face rules for heavier weights? For example:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Open Sans'), local('Open Sans Regular'), local('OpenSans-Regular'), url(fonts/opensans.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/opensansbold.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;
}

According to MDN, bold generally equates to font-weight: 700, so browsers may be improvising with font-weight: 600. You might need to add a few more rules to help browsers that aren't improvising as successfully.

But I'm most definitely not an expert on on fonts. We have this article if the forum isn't able to get to the bottom of it: Where to go for developer support.

more options

Issue was as jscher2000 pointed out, I had to specify font-face for different font-weight (in my case bold), and then FF was rendering it correctly. Thanks a lot for help!