웹 사이트에서 Google의 Roboto 글꼴을 사용하려면 어떻게해야하나요?

163

내 웹 사이트에서 Google의 Roboto 글꼴을 사용하고 싶은데이 자습서를 따르고 있습니다.

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

다음과 같은 폴더 구조를 가진 파일을 다운로드했습니다.

여기에 이미지 설명을 입력하십시오

이제 세 가지 질문이 있습니다.

내 media/css/main.cssURL에 CSS가 있습니다. 폴더를 어디에 두어야합니까?
모든 하위 폴더에서 모든 eot, svg 등을 추출하여 폴더에 넣어야 fonts합니까?
CSS 파일 fonts.css를 작성하고 기본 템플리트 파일에 포함시켜야합니까?

그가 사용하는 예

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

dir 구조를 원한다면 내 URL은 어떻게 생겼습니까?

/media/fonts/roboto

html css fonts

— 사용자 26
소스

257

실제로이 작업을 수행 할 필요는 없습니다.

Google의 웹 글꼴 페이지로 이동
검색 Roboto오른쪽 상단에있는 검색 창에
사용할 글꼴의 변형을 선택하십시오
상단의 '이 글꼴 선택'을 클릭하고 필요한 가중치와 문자 세트를 선택하십시오.

이 페이지는 페이지 <link>에 포함 할 요소와 font-familyCSS에 사용할 샘플 규칙 목록을 제공 합니다.

이러한 방식으로 Google 글꼴을 사용하면 가용성이 보장되고 자신의 서버에 대한 대역폭이 줄어 듭니다.

— 수닐 가그
소스

고마워요, 완벽했습니다. Google Play 스토어에서 Google이 재생 목록에 어떤 설정을 사용하는지 알고 있습니까? 나는 그런 스타일을 정확히 원합니다. 또한 링크에서 링크 또는 코드 스 니펫을 찾지 못했습니다. 나는 거기에 글꼴하지만 코드를 참조 할

— user26

3

멋진 점은 LESS 파일에 대한 @import도 제공합니다! 그러나 인터넷 연결이 없거나 Google 연결 문제가없는 테스트 (예 : 중국) = 글꼴 없음 ... 또한 Roboto Black (Roboto Bk)이없는 것으로 나타났습니다 font-family. 실제로 3 개의 글꼴 모음 (Roboto, Roboto Condensed 및 Roboto로 슬래브) 다른 모든 Roboto로의 변형을 통해 만들어진 font-style및 font-weightCSS 변경됩니다. 이상적으로는 Google에 배치 한 후 <link>글꼴이 실제로 있는지 확인하십시오. 그렇지 않은 경우 직접 사용하십시오 (하나의 글꼴 군에서 모든 파일을로드하는 데 일반적으로 0.5MB를 초과하지 않음).

— Armfoot

7

@ user26

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>

이것은 하나의 폰트 패밀리에서만 모든 스타일을로드합니다 : Roboto. (예 : 당신은 Google이 아닌 글꼴의 글꼴 가족을해야하는 경우, Roboto로 블랙 당신이 당신의 폴더에있는 파일을 필요로하고 다음과 같이 (당신의 main.css가에 당신이 당신의 질문에 우리를 보여 예제 코드를 복사) @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.또는 같은 난에 제안 내 대답).

— Armfoot

14

의 경우 -1입니다 Using Google's fonts this way guaranties availability. Google 글꼴은 "사용 가능한 보증"이라고 할 수 없습니다. 나는 구글의 CDN을 사용하는 수십억 명 이상의 사람들이되어 수많은 웹 사이트가 제대로로드되지 않거나 전혀로드되지 않는다는 것을 의미합니다. 누구에게해야 할 일을 말하지는 않지만 Google의 CDN이 완벽한 솔루션이라고는 생각하지 않습니다.

— Nateowami

1

-1. @Nateowami가 언급했듯이 특정 국가에서는 차단 될 수있는 Google 서버에 의존하고 있으며 개인 정보 보호에 좋지 않으며 실제로 CDN에서 글꼴을 호스팅하면 성능이 향상 될 수 있습니다. 그것은 더 많은 일이지만 그것이 당신의 일입니까?

— 로빈 Métral

70

페이지에서 라이센스가있는 웹 글꼴을 사용하기 위해 취할 수 있는 두 가지 접근 방식 이 있습니다.

Typekit, Fonts.com, Fontdeck 등과 같은 글꼴 호스팅 서비스는 설계자가 구매 한 글꼴을 관리하고 글꼴을 제공하는 동적 CSS 또는 JavaScript 파일에 대한 링크를 생성 할 수있는 간편한 인터페이스를 제공합니다. 구글은 심지어 (무료로이 서비스를 제공 여기 Roboto로 요청한 글꼴에 대한 예입니다). Typekit은 글꼴이 브라우저에서 동일한 픽셀을 차지하도록 추가 글꼴 힌트를 제공하는 유일한 서비스입니다.

Google 및 Typekit에서 사용하는 것과 같은 JS 글꼴 로더 (예 : WebFont 로더) 는 발생할 수있는 FOUT 을 관리하는 데 도움이되는 CSS 클래스와 콜백을 제공 하거나 글꼴을 다운로드 할 때 응답 시간이 초과됩니다.
```
<head>
  
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>
```

DIY 접근 방식은 웹용으로 라이센스가 부여 된 글꼴을 가져오고 선택적으로 FontSquirrel의 생성기 (또는 일부 소프트웨어)와 같은 도구를 사용하여 파일 크기를 최적화하는 것입니다. 그런 다음 표준 @font-faceCSS 속성 의 브라우저 간 구현 을 사용하여 글꼴을 활성화합니다.

이 방법을 사용하면 포함 할 문자와 파일 크기를보다 세밀하게 제어 할 수 있으므로로드 성능이 향상 될 수 있습니다.

/* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

간단히 말해 :

@ font-face 선언과 함께 글꼴 호스팅 서비스를 사용하면 전반적인 성능, 호환성 및 가용성과 관련하여 최상의 결과를 얻을 수 있습니다.

출처 : https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

최신 정보

Roboto : Google의 서명 글꼴은 이제 오픈 소스입니다

이제 여기에 있는 지침을 사용하여 Roboto 글꼴을 수동으로 생성 할 수 있습니다 .

— 애 쉬쉬 쿠마르 싱
소스

17

오래된 게시물입니다.

이것은 CSS를 사용하여 가능합니다 @import url.

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}

— 록스 테드
소스

8

귀하의 솔루션은 성능 방지 패턴입니다. 마크 업에 링크 태그를 사용하면 @import에 비해 Google CSS 파일을 더 빨리 다운로드 할 수 있습니다. 브라우저는 일반적으로 프리 로더로 인해 일반적으로 리소스 참조를 발견합니다 (HTML을 구문 분석하는 대신 HTML을 먼저 구문 분석 한 다음 CSS 파일을 발견 한 다음 다운로드 한 다음 @import를 구문 분석 및 발견 한 다음 가져온 스타일 시트를 다운로드하십시오).

— Radko Dinev

3

반드시 그런 것은 아닙니다. Webpack과 플러그인을 사용하면 배포 빌드에 모두 포함됩니다.

— Spock

5

는 src당신이 그들 모두를 배치하므로 경우, 글꼴 파일에 직접 말합니다 /media/fonts/roboto이처럼 main.css가 그들에게 참조해야합니다 : src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

은 ..당신이 언급하고 즉, 하나 개의 폴더를 이동 mediamain.css가가에있는 경우 폴더 /media/css폴더.

../fonts/roboto/CSS의 모든 URL 참조에서 사용해야 합니다 (및 파일이와 같은 하위 디렉토리가 아닌이 폴더에 있는지 확인하십시오 roboto_black_macroman).

기본적으로 (질문에 대한 답변) :

내 media / css / main.css URL에 CSS가 있습니다. 폴더를 어디에 두어야합니까?

거기에 둘 수는 있지만 반드시 사용하십시오 src: url('../fonts/roboto/

모든 하위 폴더에서 모든 eot, svg 등을 추출하고 글꼴 폴더에 넣어야합니까

CSS 파일에 하위 디렉토리를 배치하지 않고 해당 파일을 직접 참조하려면 예입니다.

CSS 파일 fonts.css를 작성하고 기본 템플릿 파일에 포함시켜야합니까?

반드시 main.css에 해당 코드를 포함시킬 필요는 없습니다. 그러나 사용자 정의 CSS에서 글꼴을 분리하는 것이 좋습니다.

내가 사용하는 글꼴 LESS / CSS 파일의 예는 다음과 같습니다.

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(이 예제에서는 ttf 만 사용하고 있습니다.) 그런 다음 @import "fonts";main.less 파일에서 사용 합니다 ( CSS 전처리 기가 적을수록 이와 같은 것이 조금 더 쉽습니다 )

— 팔걸이
소스

2

이것이 CDN을 사용하지 않고 정적 배치를 위해 원하는 woff2 파일을 얻기 위해 한 것입니다

CSS에 대한 cdn을 임시로 추가하여 roboto 글꼴을 index.html에로드하고 페이지를로드하십시오. Google 개발자 도구에서 소스를보고 fonts.googleapis.com 노드를 확장하고 css? family = Roboto : 300,400,500 & display = swap 파일의 내용을보고 내용을 복사하십시오. 이 컨텐츠를 자산 디렉토리의 CSS 파일에 넣으십시오.

css 파일에서 그리스어, cryllic 및 베트남어 항목을 모두 제거하십시오.

이 CSS 파일에서 다음과 유사한 행을보십시오.

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

링크 주소를 복사하여 브라우저에 붙여 넣으면 글꼴이 다운로드됩니다. 이 글꼴을 자산 폴더에 넣고 CSS 파일뿐만 아니라 여기에서 이름을 바꿉니다. 다른 링크 로이 작업을 수행하면 6 개의 고유 woff2 파일이 있습니다.

재료 아이콘에 대해 동일한 단계를 따랐습니다.

이제 돌아가서 cdn을 호출하는 줄을 주석 처리하고 대신 새로 만든 CSS 파일을 사용하십시오.

— 헬즈 게이트
소스

1

이 시도

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>

— 수석 개발자
소스

1

CSS 스타일 시트에서 글꼴 유형 이름 앞에 / fonts / 또는 / font / 를 사용하십시오 . 나는이 오류에 직면했지만 그 후에는 잘 작동합니다.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

— 모하메드 자 브드
소스

1

웹 사이트의 경우 아래와 같이 'Roboto'글꼴을 사용할 수 있습니다.

별도의 CSS 파일을 만든 경우 CSS 파일의 맨 아래에 다음과 같이 입력하십시오.

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

또는 별도의 파일을 만들지 않으려면 사이에 위의 줄을 추가하십시오 <style>...</style>.

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

그때:

html, body {
    font-family: 'Roboto', sans-serif;
}

— Mr. Nobody
소스

0

해당 zip 파일에있는 How_To_Use_Webfonts.html을 읽었습니까?

읽은 후에는 각 글꼴 하위 폴더에 이미 .css가 생성되어 다음을 포함하여 사용할 수있는 것 같습니다.

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

— 배리 콜 뱅크 주니어
소스

0

그것은 간단합니다

다운로드 한 폴더의 모든 폴더에는 다른 종류의 로봇 글꼴이 있습니다.

예 : "roboto_regular_macroman"

그들 중 하나를 사용하려면 :

1- 사용하려는 글꼴의 폴더를 추출하십시오.

2- CSS 파일 근처에 업로드

3- 이제 CSS 파일에 포함

"roboto_regular_macroman"이라는 폰트를 포함시키는 예 :

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

파일의 경로를 확인하십시오. 여기에서 CSS가있는 동일한 폴더에 "roboto_regular_macroman"이라는 폴더를 업로드했습니다.

다음을 입력하여 간단히 글꼴을 사용할 수 있습니다 font-family: 'Roboto';

— 오마르 무스타파
소스

0

실제로는 매우 간단합니다. Google 웹 사이트의 글꼴로 이동하여 글꼴을 포함하려는 모든 페이지의 머리글에 링크를 추가하십시오.

0

글꼴 문제를 수정하여 한 시간을 보냈습니다.

관련 답변-아래는 React.js웹 사이트를 위한 것입니다 :

npm 모듈을 설치하십시오.

npm install --save typeface-roboto-mono
.js 파일로 가져 오려면
다음 중 하나 를 사용 하십시오 .

import "typeface-roboto-mono"; // 가져 오기가 지원되는 경우 // 가져 오기가 지원
require('typeface-roboto-mono') 되지 않는 경우
요소 의 경우 다음 중 하나를 사용할 수 있습니다
.

fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

희망이 도움이됩니다.

— 마노 하르 레디 포로 디
소스