'Source Sans Pro' Font / 'Roboto' Font

< 'Source Sans Pro' Font Download 받기 >

http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1959

http://sourceforge.net/projects/sourcesans.adobe/files/

SourceSansPro_FontsOnly-2.010roman-1.065-italic.zip 파일을 다운로드 받아서 압축을 풀면

source-sans-pro.css

파일이 들어 있다.

이 파일 안에 'Source Sans Pro' Font의 다양한 @font-face 설정이 들어 있다.

@font-face{

    font-family: 'Source Sans Pro';

    font-weight: 600;

    font-style: normal;

    font-stretch: normal;

    src: local('SourceSansPro-Semibold'),

         local('Source Sans Pro Semibold'),

         url('EOT/SourceSansPro-Semibold.eot') format('embedded-opentype'),

         url('WOFF/OTF/SourceSansPro-Semibold.otf.woff') format('woff'),

         url('OTF/SourceSansPro-Semibold.otf') format('opentype'),

         url('TTF/SourceSansPro-Semibold.ttf') format('truetype');

}

IE 9 에서는 다음과 같이 해야 font가 적용된다.

[참고] https://forums.digitalpoint.com/threads/font-face-not-working-in-ie-browsers.2443122/

@font-face{

    font-family: 'Source Sans Pro';

    font-weight: 600;

    font-style: normal;

    font-stretch: normal;

    src: url('EOT/SourceSansPro-Semibold.eot');

    src: local('SourceSansPro-Semibold'),

         local('Source Sans Pro Semibold'),

         url('EOT/SourceSansPro-Semibold.eot') format('embedded-opentype'),

         url('WOFF/OTF/SourceSansPro-Semibold.otf.woff') format('woff'),

         url('OTF/SourceSansPro-Semibold.otf') format('opentype'),

         url('TTF/SourceSansPro-Semibold.ttf') format('truetype');

}

Web Fonts 사용하기

[출처] http://www.codestore.net/store.nsf/unid/BLOG-20120814-0739

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" 
    rel="stylesheet" 
    type="text/css">

article header h3, article h4 {
 font-family: 'Source Sans Pro', Verdana;
 font-weight: 600;
}

폰트를 좀 더 가늘게 사용하고 싶으면 css 에 font-weight: 400; 으로 지정해서 사용하면 된다.

위에서처럼 Google의 웹폰트 css를 호출하면

웹브라우저에 따라서 css의 내용이 적당히 바뀌어서, 다운로드 받는 웹폰트의 type도 달라진다.

http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600 를 호출했을때

Chrome Browser에서 응답받는 내용.

/* vietnamese */

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 400;

  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNOAHFN6BivSraYkjhveRHY.woff2) format('woff2');

  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;

}

/* latin-ext */

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 400;

  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlC2Q8seG17bfDXYR_jUsrzg.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 400;

  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlDKRFmJUU_JfdI4amS9F_UY.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, U+E0FF, U+EFFD, U+F000;

}

/* vietnamese */

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 600;

  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGClYwVOhDRq2vbpGRTZ7bbs.woff2) format('woff2');

  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;

}

/* latin-ext */

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 600;

  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGFKFh1TDTPrUZWzVp6FtpG8.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 600;

  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGG_w2dyNTaOK_2O4fIAsE0k.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, U+E0FF, U+EFFD, U+F000;

}

http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600 를 호출했을때

Internet Explorer 9에서 응답받는 내용.

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 400;

  src: url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlN0tugusXa58UbOrParLRF0.eot);

  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlN0tugusXa58UbOrParLRF0.eot) format('embedded-opentype'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');

}

@font-face {

  font-family: 'Source Sans Pro';

  font-style: normal;

  font-weight: 600;

  src: url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGNanmHNzStikJN_FjplbBik.eot);

  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGNanmHNzStikJN_FjplbBik.eot) format('embedded-opentype'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format('woff');

}

웹폰트가 브라우저에 의해서 캐쉬되기 때문에 매번 다운로드 받지도 않는다.

Google에서 제공하는 웹폰트를 사용하는 것이 편하고 좋은것 같다.

Top 20 Google Web Fonts and How to Use Them

http://bootstrapbay.com/blog/google-web-fonts/

The 30 greatest free web fonts

http://www.creativebloq.com/typography/free-web-fonts-1131610

Choosing web fonts: 15 expert tips

http://www.creativebloq.com/web-design/choose-web-fonts-1233034

 Fonts

https://www.google.com/fonts

20 Best Web Fonts from Google Web Fonts and @font-face

http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html

Google의 Roboto Font 사용하기

< How to Use The Google’s Roboto Font Everywhere >

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

<2014-09-30>

Roboto 웹폰트를 웹에서 사용하기 위해 https://code.google.com/p/roboto-webfont/ 에 나와 있는대로 해 보았더니 Chrome 브라우저에서 font가 적용이 안됨.

Usage

To use Roboto webfont on your website, simple link Roboto.css to your website as follow:

Standard:

<link href="http://roboto-webfont.googlecode.com/svn/trunk/roboto.all.css" rel="stylesheet" type="text/css">

@import:

@import url('http://roboto-webfont.googlecode.com/svn/trunk/roboto.all.css');

(To use with secured website, please replace http by https)

To modify Roboto.css stylesheet file, just download it from Download session and remove any unnecessary font-face to reduct the load time of your website.

웹페이지에 <link href="~~~" rel="stylesheet" type="text/css"> 를 하던지

css 파일에서 @import url('http://~~~'); 를 해도 Roboto Font가 적용되지 않음.

Chrome 브라우저에서 Font가 적용되었는지 확인하려면 개발자 도구에서 Font를 알고 싶은 Element를 선택하고 Computed 탭을 선택해서 스크롤을 맨 밑으로 내리면 "Rendered Fonts" 라는 항목에서 적용된 Font를 확인해볼수 있다.

Font를 적용되게 하려면

http://roboto-webfont.googlecode.com/svn/trunk/roboto.all.css 를 웹브라우저로 접속해서 내가 쓰고자 하는 @font-face를 내 css 파일 안에 copy & paste 해야 한다.

@font-face {

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 900;

  src: url('https://themes.googleusercontent.com/font?kit=1_sFLBJZ_MiiGcnkjN_Mgg') format('woff');

}

@font-face {

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 500;

  src: url('https://themes.googleusercontent.com/font?kit=7KXg6nyyqN8gyMoNwQ7aOQ') format('woff');

}

@font-face {

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 300;

  src: url('https://themes.googleusercontent.com/font?kit=d-QWLnp4didxos_6urzFtg') format('woff');

}

왜 <link ~> 랑 @import 는 적용이 안되는지 이해가 안된다. ㅡ.ㅡ

IE9 의 개발자 도구에서 보면 font/woff 파일만 전송되는데도 폰트가 잘 적용된다.

IE9 에서도 css 파일 안의 @font-face 를 주석 처리하고, <link ~> 랑 @import 로 하면 네트워크로 전송되는 woff 파일은 동일한데, 이상하게 폰트가 적용되지 않았다.

IE9 에서 css 파일 안에 있는 @font-face 를 주석 처리하고, 웹페이지에서 

<link href="http://roboto-webfont.googlecode.com/svn/trunk/roboto.all.css" rel="stylesheet" type="text/css" /> 를 주석 처리하고,

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css' /> 를 넣었더니 eot 파일로 다운로드하고, 파일 용량도 적고, 다운로드 시간도 더 단축되었다.

☞ 밑에 이미지 캡쳐한 것을 보면 font/woff 는 source sans pro 폰트이고, 그 밑에 3개의 font/eot 는 Roboto 폰트이다.

☞ <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css' /> 를 얻기 위해서는 Google Fonts ( https://www.google.com/fonts )에 들어가서 좌측 상단에서 roboto 로 검색하고, Roboto 폰트에서 Quick-use 버튼을 누르면 된다.

 Fonts