# font-face

16개의 포스트
post-thumbnail

CSS font-face 속성으로 같은 패밀리 폰트 여러개 불러오기

font-face 방식으로 폰트이름을 하나로 하고 여러개의 스타일을 표현하기아래와 같이 font-family의 명은 동일하게 한다. src파일 마다 weight값을 지정해서 여러개의 @font-face를 작성한다.전체에 한 폰트 패밀리를 적용한다.원하는 weight로

2023년 3월 9일
·
0개의 댓글
·

230306 day5

transform 태그

2023년 3월 6일
·
0개의 댓글
·
post-thumbnail

TIL / CSS 기초 : 단위(px, em, rem), CSS 레이아웃 구성 방법(flex, grid), font-face

< 2023.02.17 TIL > 1. 단위 - px, em, rem 2. CSS 레이아웃 구성 방법 - flex, grid 3. font-face

2023년 2월 17일
·
0개의 댓글
·

폰트 사용

@font-face 를 사용해서 웹 페이지의 텍스트에 온라인 폰트 (online fonts)를 적용할 수 있다. @font-face를 사용해서 디자이너가 원하는 폰트를 사용할 수 있게 함으로써, 컴퓨터에 설치된 폰트로만 사용해야 했던 제약이 없어지게 되었다!아래 예제에

2023년 2월 14일
·
0개의 댓글
·
post-thumbnail

styled-components 웹폰트 적용하기

강의에서 styled-components안에 @import를 사용해 폰트를 적용 시켰다

2022년 8월 20일
·
0개의 댓글
·

서버 웹폰트 적용 @font-face

log 2015. 5. 1. 11:28파일 : NanumGothic.eot, NanumGothic.woff 경로 : fonts/NanumGothic.eot, fonts/NanumGothic.woff 시스템 글꼴이 없는 경우 IE6~9 브라우저에서 eot형식외에 woff

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

양날의 검, 웹 폰트!

😅 편리함에 따르는 대가

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

web font

기본형 @font-face { font-family: 글꼴 이름; src: url(글꼴파일경로) format(파일유형); }ttf 폰트를 eot파일과 woff파일로 변환ttf 파일은 다른 형식의 파일보다 용량이 크기 때문에 대부분읭 모던 브라우저에서 지원

2022년 6월 29일
·
0개의 댓글
·
post-thumbnail

웹폰트 사용

subset과 브라우저에 맞는 폰트

2022년 3월 31일
·
0개의 댓글
·
post-thumbnail

node cli 로 @font-face generator 만들기 - 2

저번에 폰트 파일을 바탕으로 font-face CSS 파일을 만들어주는 간단한 node cli 를 개발하는 과정을 포스팅 했었는데 이제는 이를 npm 에 올리고, github actions 을 통해 자동 배포를 하는 방법을 포스팅 해보려고 한다.node cli 로 @f

2021년 12월 11일
·
0개의 댓글
·
post-thumbnail

node cli 로 @font-face generator 만들기 - 1

오랜만에 글을 쓰게 되었는데 요즘 일이 너무 바빠서 개인 프로젝트 할 시간이 없었다 (핑계...)무튼 사실 개인프로젝트 뭐할지 생각도 안나고, 마땅히 끌리는게 없어서 안하게 되고 그러다보니 자연스럽게 글도 안쓰게 되는것 같았다.그러던 중 폰트 작업을 할 일이 생겼다.

2021년 12월 11일
·
0개의 댓글
·

[css] font-face 동작 순서

프로젝트 말미에 font에 관련해서 골머리를 싸매게 되었다. 그냥 다운 받아서 local에 넣어가지고 쓰는데 문제는 safari... 왜 브라우저가 여러개야! (IE 지원 고려 안하는 걸 다행으로 생각해야지)아무튼 font-face의 사용법을 정리할 필요성을 느껴서 한

2021년 12월 10일
·
0개의 댓글
·
post-thumbnail

CSS에 폰트 적용하기 (웹폰트 & 폰트 파일)

눈누, Google Fonts 등에서 웹폰트 주소를 복사해서 사용한다적용적용파일을 다운받은 후 프로젝트 디렉토리에 복사한다url 자리에 해당 폰트 파일의 경로 기입font-family이름은 원하는대로 지정적용

2021년 1월 31일
·
0개의 댓글
·

CSS3111: @font-face encountered unknown error.

CSS3111: @font-face encountered unknown error. https://www.jsdelivr.com/ @font-face에 알 수 없는 오류가 발생했습니다 IE11에서 이러한 에러가 났다. 네이버에서 제공하는 '나눔바른고딕'을 웹폰트로

2020년 3월 27일
·
0개의 댓글
·

웹 폰트 최적화

웹에서 제공되는 정보의 95% 이상은 문어(written language)의 형태입니다. 좋은 타이포그래피는 사용자의 가독성, 접근성, 사용성 등을 사용자 경험을 향상시킬 수 있습니다. 이처럼 웹에서 타이포그래피는 중요합니다.웹 폰트(Web Font)는 디자이너가 원하

2020년 2월 19일
·
0개의 댓글
·