인스타그램을 따라 만들면서 기본 폰트를 인스타그램사이트의 폰트를 따라하는 과정입니다.
똑같은 폰트를 찾아서 변경 할 수는 없었지만 google font에서 비슷한 폰트를 찾아서 적용하는 방법으로 진행했습니다.
google font는 구글에서 제공하는 무료 웹폰트 서비스입니다.
google font 외에도 웹폰트 서비스를 제공하는 곳이 있으니, 다음번에는 다른 서비스를 이용해서 제작해 볼 생각입니다.
인스타그램 폰트 따라하기
좌측의 사진은 실제 인스타그램의 로그인 페이지이고, 우측은 인스타그램을 따라서 만들고 있는 페이지 입니다.
실제 인스타그램 페이지처럼 로고를 사진이 아닌 폰트로 나타내고 싶어서 방법을 찾아보니 웹프로그래밍에서 사용이 가능한 폰트를 제공하는 곳이 여러 곳이 있지만 똑같은 폰트스타일은 찾을 수 없어 비슷한 폰트를 선택해서 google font를 사용해 진행했습니다.
Google Font 사용하는 방법
1. google font 사이트에 접속을 합니다.
검색창에 google font를 검색하면 바로 찾을 수 있고, 아래 링크를 클릭하셔도 됩니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 사이트에 접속하여 원하는 글꼴을 선택하여 이동합니다.
아래와 같은 페이지로 이동이 하게되면 우측에 Select this style을 선택합니다.
3. 화면 중앙 우측에 Select this style을 선택하면 아래와 같은 화면이 나옵니다.
구글 폰트에서 안내하고있는 "Use on the Web"부분의 <link> 태그부분을 복사해서 <head>태그 안에서 붙여넣기 합니다.
아래의 "CSS rules to specify families"부분의 CSS부분의 font-fomily:는 사용하고 싶은 부분(글꼴이 적용될 태그)에 사용하시면 되겠습니다.
(아래와 같은 화면이 나오지 않는다면, 빨간색으로 표시된 아이콘을 클릭하시면됩니다.)
예시
"Use on the Web"부분의 <link> 태그 부분을 복사해서 <head>태그 안에서 붙여넣기
CSS rules to specify families"부분의 CSS부분의 font-fomily:는 사용하고 싶은 부분에 사용
위와 같이 적용해서 실행시켜보면
아래의 사진처럼 instagram의 폰트스타일 변경되서 출력되는 모습을 확인 할 수 있었다.
예전에 학원에서 팀프로젝트를 진행하면서 글꼴을 변경할 생각은 하지 못하고 메소드만 만드는데 정신이 없었습니다. 폰트를 변경한다는게 그때는 어려울꺼라고 생각이 들었는지 폰트의 두깨 크기만 변경하는 방법으로 진행했는데,
혼자 클론코딩을 진행하다니까 해보지 않았던 방법들에 접하게되면서 이렇게 폰트를 변경하는 방법도 공부하게 되고 도움이 많이 되고있습니다. 다른 것도 만들어 보고싶습니다
위 방법을 공부하면서 참고한 사이트 입니다.
인스타그램 따라하기 5
instagram에 폰트를 적용하겠다. 구글 폰트를 이용하는데, 실제 instagram의 폰트인 billabong는 유료라서 다른 필기체 폰트를 하나 골라서 적용했다. 마음에 드는 폰트 아무거나 적용하면 된다. 폰트를
lshdv.tistory.com
