Ruby on Rails 프로젝트에 글꼴을로드하는 데 시간이 너무 많이 걸림

Question

저는 Rails 프로젝트에 있는데 /assets/fonts 폴더에있는 두 개의 글꼴을 사용하고 있습니다.

@font-face { 
    font-family: FuturaStd-Light; 
    src: url("/assets/fonts/FuturaStd-Light.otf"); 
} 

@font-face { 
    font-family: HelveticaNeue; 
    src: url("/assets/fonts//HelveticaNeue.dfont"); 
} 

글꼴은 매우 큰 파일 (특히 두 번째 파일)이며로드하는 데 오랜 시간이 걸립니다. 그리고 모든 페이지에서 텍스트는 다른 모든 것 다음에 나타납니다.

글꼴을로드하는 더 좋은 방법이 있습니까? 캐시 할 수있는 방법이 있습니까? 어떤 아이디어?

Answer 1

@ font-face는 멋진 기술이지만 크기가 큰 글꼴 파일로 인해 사이트 속도가 느려집니다. fontsquirrel 같은 서비스를 사용하여 글꼴 파일을 최적화

이

• 는 CDN
• 에 google fonts 또는 typekit
• 호스트처럼 글꼴 파일을 글꼴 호스팅 서비스를 사용 :이 대처하기 위해 사용할 수있는 많은 방법이 있습니다

특히 조심해야 할 점은 스타일 시트 앞에 요소가있는 경우 IE가 전체 페이지의 렌더링을 차단한다는 것입니다. 따라서 모든 스타일 시트 링크가로드중인 자바 스크립트 파일 위에 있는지 확인하십시오.

추가 읽기 : 나는 스콧에 동의

• Web Font Performance: Weighing @font-face Options and Alternatives
• @font-face and performance
• fighting the FOUT

Answer 2

, @ 글꼴 얼굴이 사이트를 느리게하고 그래서 당신의 목표에 따라 수 있습니다 당신은 할 수있다 Google 글꼴, typekit 또는 다른 온라인 글꼴 공급자와 함께 가고 싶습니다. 내가 현재 일하고있는 프로젝트의 경우 Google 글꼴을 선택했습니다. 당신이해야 할 모든에 니펫 구글 웹 글꼴을 추가 당신의 당신의 applications.html.erb에 : 다음

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'> 

그리고 CSS 파일에 추가 :

h1 { 
    font-family: "PT Sans", Arial, Helvetica, sans-serif; 
}