작업시 폰트 로컬 폰트 연결하기

.eot, .woff 폰트가 font폴더에 있다는 가정하에 만약 .otf 폰트만 있다면 컨버트 하여 변경해준다.
폰트 변경할 수 있는 사이트 : https://cloudconvert.com/

CloudConvert

 

 

작업시 폴더구조

• font.css

@font-face {
  font-family: "YouandiModernHead";
  font-style: normal;
  font-weight: bold;
  src: url(../font/YouandiModernHeadBold.eot);
  src: url(../font/YouandiModernHeadBold.eot?#iefix) format("embedded-opentype"),
    url(../font/YouandiModernHeadBold.woff) format("woff");
}

@font-face {
  font-family: "YouandiModernHead";
  font-style: normal;
  font-weight: 900;
  src: url(../font/YouandiModernHeadExtraBold.eot);
  src: url(../font/YouandiModernHeadExtraBold.eot?#iefix)
      format("embedded-opentype"),
    url(../font/YouandiModernHeadExtraBold.woff) format("woff");
}

@font-face {
  font-family: "YouandiModernHead";
  font-style: normal;
  font-weight: 400;
  src: url(../font/YouandiModernHeadRegular.eot);
  src: url(../font/YouandiModernHeadRegular.eot?#iefix)
      format("embedded-opentype"),
    url(../font/YouandiModernHeadRegular.woff) format("woff");
}

@font-face {
  font-family: "YouandiModernText";
  font-style: normal;
  font-weight: bold;
  src: url(../font/YouandiModernTextBold.eot);
  src: url(../font/YouandiModernTextBold.eot?#iefix) format("embedded-opentype"),
    url(../font/YouandiModernTextBold.woff) format("woff");
}

@font-face {
  font-family: "YouandiModernText";
  font-style: normal;
  font-weight: 400;
  src: url(../font/YouandiModernTextRegular.eot);
  src: url(../font/YouandiModernTextRegular.eot?#iefix) format("embedded-opentype"),
    url(../font/YouandiModernTextRegular.woff) format("woff");
}

• reset.css

.ymhead {
  font-family: "YouandiModernHead";
  font-weight: bold;
}

.ymheadBold {
  font-family: "YouandiModernHead";
  font-weight: 900;
}

.ymText {
  font-family: "YouandiModernText";
  font-weight: bold;
}

• style.css

@import url("./font.css");
@import url("./reset.css");

html에서 작업 할 경우

<div class="mainVisual">
    <img src="./img/main_visual_background.png" alt="카드이미지">
    <div class="cardWrap">
        <div class="cardLeft"><img src="./img/main_visual_card_left.png" alt="카드왼쪽이미지"></div>
    </div>
    <div class="titleWrap ymhead">
        <p>Ready Asset Go</p>
        <h2>미래에셋<br />현대카드</h2>
    </div>
    <div class="mireAsset_logo"></div>
    <div class="hyundaiCard_logo"></div>
</div>