메인 폰트 사용법이 궁금합니다.
209
投稿した質問数 4
4.0 기준으로 학습하고 있습니다.
input.css 파일을 아래와 같이 작성하면
자동으로 Montserrat 폰트 즉 첫번째 줄 폰트가
적용되는건가요?
메인 폰트 적용 방법을 모르겠습니다.
@theme {
--font-mont: "Montserrat", "sans-serif";
--font-noto: "Noto Sans KR", "Arial", "sans-serif";
/* Color */
--color-deepgreen:#6ab04c;
--color-deeporange:#f0932b;
}
回答 2
0
안녕하세요, 인프런 AI 인턴입니다. 좀 해님.
Tailwind CSS에서 폰트를 적용하는 방법에 대해 궁금하시군요. 아래 질문과 답변을 참고하시길 바랍니다.
Tailwind CSS에서 폰트 설정: Tailwind CSS는 커스터마이즈된 구성 파일을 통해 폰트를 설정할 수 있습니다.
theme.extend를 통해 폰트를 설정할 수 있으며,extend섹션에 추가한 후 해당 클래스를 사용하여 HTML 요소에 적용됩니다.글꼴 로딩:
- 폰트가 제대로 적용되기 위해서는 해당 폰트가 브라우저에 로드되어야 합니다. Google Fonts나 기타 웹폰트 서비스에서 폰트를 가져와
index.html의<head>에<link>태그로 추가할 수 있습니다.
- 예시 (Google Fonts 사용):
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
- 폰트가 제대로 적용되기 위해서는 해당 폰트가 브라우저에 로드되어야 합니다. Google Fonts나 기타 웹폰트 서비스에서 폰트를 가져와
Tailwind 구성파일에서 폰트 설정:
tailwind.config.js파일이 있다면 다음과 같이 수정합니다:
module.exports = { theme: { extend: { fontFamily: { mont: ['Montserrat', 'sans-serif'], noto: ['Noto Sans KR', 'Arial', 'sans-serif'], }, }, }, }
- 그 이후로 HTML에서
class="font-mont"와 같은 클래스로 해당 폰트를 적용할 수 있습니다.
관련된 질문들을 참고하면 도움이 될 것입니다:
폰트 관련 문의합니다: 콘솔 로그에서 제거된 폰트가 계속 나타난다면 캐시 문제일 수 있습니다. 개발자 도구에서 캐시를 비우고 페이지를 새로고침하세요.
textarea 난에 글쓸때 지정된 폰트가 안먹혀서요: 특정 요소에 폰트가 적용되지 않을 경우, 태그별로
font-family를 설정해주셔야 합니다. 전체 선택자*를 사용할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
수업자료와 노션 공유 문제
0
16
3
git 초기설정하고 Next Js 설치하는게 너무 어렵습니다.
0
13
1
궁금했던 질문입니다. 바로 콤마위치 입니다.
0
25
1
[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지
0
35
1
'CSS Level 3: grid'의 정리본 PDF도 올려주시면 좋을 듯 합니다.
0
54
2
경력기술서는 어떤 방향이 좋을까요?
0
52
2
React 버전업 관련 문의
0
46
2
왜 https://via.placeholder.com/150 등 링크가 연결이 안되나요?
0
74
3
어플리케이션 실행 후 에러에 관하여 질문 드립니다.
2
60
2
26,27강 진행 간 노션, html 프롬프트 파일 불일치
0
67
3
<div id="banner">배너 이미지</div> 관련 질문
0
34
1
변수 설정 시에 질문입니다.
0
40
2
설치 및 설정 가이드 노션 자료는 없나요 ?
0
44
2
counter01.html은 어디있을까요?
1
30
1
수업자료 문의
0
39
2
그리드 레이아웃 관련 질문드립니다.
1
153
2
유틸리티 클래스 외부 링크
1
172
2
반응형 레이아웃 문의 드려요.
1
156
2
섹션 1 - 3강 화면이 안나오는것 같네요
1
231
2
text가 border 밖에 형성되는 이유와 해결방법을 알고싶습니다
1
193
1
단축키 질문입니다!
1
236
1
섹션1 Animation에서 실습에 활용되는 svg 파일이 images 폴더 안에 안 들어 있습니다.
1
289
1
저도 윗 분과 마찬가지로 폴더구성이 다릅니다.
1
386
2
첨부파일 누락확인
1
485
2

