반응형

웹폰트 사용하기


웹사이트의 주소를 복사하여 스타일 시트나 html의 ‘<link href~'로 연결-스타일 시트에서 font-family로 지정합니다.
② 직접 웹서버에 업로드하는 방법 : *.eot, *woff 로 변환 - 서버로 업로드 -
@font-face{
 font-family:글꼴이름;
 src:local('글꼴이름‘),
 url('글꼴이름.eot),
 url('글꼴이름.woff') format('woff'),
 url(‘글꼴이름.ttf') format('truetype);}

 

폰트 연결하기


1. font-family : 글꼴 속성지정


윈도우의 기본글꼴은

영문 : sans-serif, serif   

한글:굴림, 궁서, 돋움, 바탕

 

 


-css3 에서 웹폰트를 웹표준으로 설정하여 글꼴을 연결하여 사용하거나, 서버로부터 다운로드하여 스타일을 적용할 수 있습니다. 

 

 

구글 폰트 다운로드 사이트


http://fonts.google.com
http://fonts.google.com/earlyaccess

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

직접 폰트 변환하여 연결하기

 

변환 사이트

https://onlinefontconverter.com/웹폰트를 변환한 후, 변환된 폰트 파일들을 fonts라는 폴더를 생성하여 넣어 주고 html에 연결하여 사용하면 됩니다.

웹폰트의 확장자에는 otf, eot, svg, ttf, woff, woff2 등이 있습니다.

 

웹에서 사용 가능한 폰트 : woff, 트루타입(ttf), 오픈타입(ttf, otf), 임베디드 오픈타입(eot), svg폰트(svg, svgz)

컴퓨터에서 사용하는 글꼴은 ‘*.ttf’이지만,다른 확장자들에 비해 용량이 크다는 단점이 있어 웹코딩을 할때에는 ‘*.eot', '*.woff'이 가장 적합합니다.

 

---> 대부분의 모던 브라우저에서 지원하는 woff 글꼴 파일을 먼저 선언하고 ttf파일은 그 다음에 선언한다.(ttf가 용량이 크기 때문에) woff파일의 형식을 지원하는 브라우저는 woff를 다운로드 하고 굳이 ttf는 따로 다운로드 하지 않습니다.

 

외부 스타일 css파일로 연결할 경우

<link href="css파일경로" rel="stylesheet" type="text/css">

 

html파일의 <head>부분에 외부 스타일 link을 연결해 놓고

css파일에는 다음과 같이 입력합니다.

@font-face{

font-family :‘글꼴이름‘;

src : local('글꼴명‘),

url('경로명/글꼴이름‘) format(’파일유형‘),

url('경로명/글꼴이름‘) format(’파일유형‘),

url('경로명/글꼴이름‘) format(’파일유형‘),

url('경로명/글꼴이름‘) format(’파일유형‘);

 

@font-face{

font-family :‘NanumPenScript-Regular‘;

src : local('NanumPenScript-Regular‘),

url('./fonts/NanumPenScript-Regular.eot‘),

url('./fonts/NanumPenScript-Regular.woff‘) format(’woff‘),

url('./fonts/NanumPenScript-Regular.ttf‘) format(’truetype‘),

url('./fonts/NanumPenScript-Regular.otff‘) format(’opentype‘);

}

 

폰트를 문서 전체( body)에 적용할 경우

body{font-family:'NanumPenScript-Regular‘,’serif','sans-serif'}

 

반응형
반응형

웹 한글 폰트 - 눈누

noonnu.cc/

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

나눔바른고딕

NanumBarunGothic

noonnu.cc/font_page/36

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

 @font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 400;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 700;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 300;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}

.nanumbarungothic * {
 font-family: 'NanumBarunGothic', sans-serif;
}

body {
  font-family: 'NanumBarunGothic';
  font-weight: 400;
}
반응형
반응형
D2 Coding 1.3.1 글꼴

https://github.com/naver/d2codingfont

D2 Coding 글꼴은 나눔바른고딕을 바탕으로 개발자의 코딩을 위해 가독성 및 유사 문자간 변별력 뿐만 아니라 디자인적으로 한글과의 조화를 고려해 최적화시킨 글꼴입니다. D2 Coding 글꼴은 코딩시 유사한 형태의 영문/숫자 뿐만 아니라 한글/특수문자 등에 대한 변별력과 가독성을 강화하였습니다. 또한 고정폭 글꼴로 제작이 되어 어떤 개발환경에서도 자간과 행간을 유지하도록 디자인되어 있습니다.


. . .
반응형
반응형

[FONT] Google Noto Font 


Beautiful and free fonts for all languages

When text is rendered by a computer, sometimes characters are displayed as “tofu”. They are little boxes to indicate your device doesn’t have a font to display the text.

Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel. Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “no more tofu”. Noto has multiple styles and weights, and is freely available to all. The comprehensive set of fonts and tools used in our development is available in our GitHub repositories.


https://www.google.com/get/noto/



...

반응형

+ Recent posts