[Vue.js] sweetalert2에서 템플릿 리터럴을 이용한 title, confirmButtonText의 폰트(font-family) 변경 방법

1. 전역 스타일에 적용된 폰트가 sweetalert2에서 적용되지 않는 문제

전역으로 사용하고 있는 scss에 폰트를 적용했고 대부분의 페이지에 해당 폰트가 적용되었으나 sweetalert2에는 적용이 되지 않았다. sweetalert2 공식 문서의 customClass 속성도 지정해 봤는데 적용되지 않았다.

 

2. 템플릿 리터럴을 이용한 폰트 변경 가능

템플릿 리터럴 방식으로 폰트 변경이 가능했다.

this.$swal({
  title: `<span style='font-family: ${this.fontFamily}'>조회기간을 선택해 주세요!</span>`,
  icon: 'error',
  iconColor: `${this.mainColor}`,
  confirmButtonText: `<span style='font-family: ${this.fontFamily}'>확인</span>`,
  confirmButtonColor: `${this.mainColor}`
})

 

[그림 1] sweetalert2의 title, confirmButtonText에 font-family가 잘 변경 되었다.

 

참고 자료
https://kr.coderbridge.com/questions/fe0316ecba7f472ba9eb27a832913fc3