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

Programming

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

procodes 2020. 6. 29. 21:42

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

내 웹 사이트에서 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

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

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

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

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

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

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의 서명 글꼴은 이제 오픈 소스입니다

You can now manually generate the Roboto fonts using instructions that can be found here.

Old post, I know.

This is also possible using 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;
}

The src refers directly to the font files, therefore if you place all of them on /media/fonts/roboto you should refer to them in your main.css like this: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

The .. goes one folder up, which means you're referring to the media folder if the main.css is in the /media/css folder.

You have to use ../fonts/roboto/ in all url references in the CSS (and be sure that the files are in this folder and not in subdirectories, such as roboto_black_macroman).

Basically (answering to your questions):

I have css in my media/css/main.css url. So where do i need to put that folder

You can leave it there, but be sure to use src: url('../fonts/roboto/

Do i need to extract all eot,svg etc from all sub folder and put in fonts folder

If you want to refer to those files directly (without placing the subdirectories in your CSS code), then yes.

Do i need to create css file fonts.css and include in my base template file

Not necessarily, you can just include that code in your main.css. But it's a good practice to separate fonts from your customized CSS.

Here's an example of a fonts LESS/CSS file I use:

@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';}

(In this example I'm only using the ttf) Then I use @import "fonts"; in my main.less file (less is a CSS preprocessor, it makes things like this a little bit easier)

Use /fonts/ or /font/ before font type name in your CSS stylesheet. I face this error but after that its working fine.

@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;

}

For Website you can use 'Roboto' font as below:

**If you have created separate css file then put below line at the top of css file as:**
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

**Or if you don't want to create separate file then add above line in between <style>...</style>:**
<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

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

Did you read the How_To_Use_Webfonts.html that's in that zip file?

After reading that, it seems that each font subfolder has an already created .css in there that you can use by including this:

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

it's easy

every folder of those you downloaded has a different kind of roboto font, means they are different fonts

example: "roboto_regular_macroman"

to use any of them:

1- extract the folder of the font you want to use

2- upload it near the css file

3- now include it in the css file

example for including the font which called "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;
}

watch for the path of the files, here i uploaded the folder called "roboto_regular_macroman" in the same folder where the css is

then you can now simply use the font by typing font-family: 'Roboto';

Try this

<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>

This is what I did to get the woff2 files I wanted for static deployment without having to use a CDN

TEMPORARILY add the cdn for the css to load the roboto fonts into index.html and let the page load. from google dev tools look at sources and expand the fonts.googleapis.com node and view the content of the css?family=Roboto:300,400,500&display=swap file and copy the content. Put this content in a css file in your assets directory.

In the css file, remove all the greek, cryllic and vietnamese stuff.

Look at the lines in this css file that are similar to:

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

copy the link address and paste it in your browser, it will download the font. Put this font into your assets folder and rename it here, as well as in the css file. Do this to the other links, I had 6 unique woff2 files.

I followed the same steps for material icons.

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

참고 URL : https://stackoverflow.com/questions/18178867/how-can-i-use-googles-roboto-font-on-a-website

저작자표시 (새창열림)

'Programming' 카테고리의 다른 글

sed 또는 awk를 사용하여 특정 줄 번호에 줄을 삽입하십시오. (0)	2020.06.29
MySQL은 외래 키 제약 조건에서 필요한 인덱스를 삭제할 수 없습니다 (0)	2020.06.29
파이썬에서 HTML을 탈출하는 가장 쉬운 방법은 무엇입니까? (0)	2020.06.29
PHP에서 이것이 의미하는 바-> 또는 => [duplicate] (0)	2020.06.29
데이터베이스에 태그를 저장하는 가장 효율적인 방법은 무엇입니까? (0)	2020.06.29

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

procodes

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

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

간단히 말해 :

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

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

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

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

간단히 말해 :

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

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바