Web font woff2 Mac/iPhone Safari applied

Changed the font of the main text of the blog to a fine background.

It's as simple as changing the css, but it took quite a while.




Problems with Chrome and Safari when applying web fonts

The fine background of Google Fonts Webfont applied.

However, it works well in Chrome, but the fine background font does not appear in Mac Safari or iPhone Safari.

When I applied the web font in Noonnu, both Chrome and Safari came out well.




Webfont woff 2.0 supported browser

The difference between these two is that the web font of Google Fonts is woff version 2, and Nounnunu is woff.

woff2.0 reportIt says that it is supported in Safari 10 and above.

The OS and Safari of my M1 MacBook Air are the latest version, macOS Big Sur (11.6), and Safari is 15.0.



Safari doesn't seem to support woff 2.0.

I wrote css with simple html and tested it locally.

Safari does not work with woff 2.0. I wondered if my Mac browser was the problem, but the same goes for Safari on the iPhone.



Comparison of woff and woff2 file sizes

Web fonts need to be downloaded when the user views them, so that they can be viewed normally, so the file size is important. It is said that woff 2 dramatically reduced the file size.

When I first made Naver Post, I tried to use web fonts, but I remembered that I was worried about the file size. So, I downloaded the fine background font file and compared it.

Ah! woff2 has a really small file size. It is only 9 KB. This is enough to use web fonts.


  • ttf: 1.8 MB
  • otf: 419kb
  • woff: 1.8 MB
  • woff2: 9kb




Support for web fonts woff and woff2

There is a way to provide both woff and woff2 at the same time.

All you need to do is to make one fine-based web font by making the font name the same.

@font-face { font-family: 'Gowun Batang'; src: url('https://fonts.gstatic.com/s/gowunbatang/v1/ijwSs5nhRMIjYsdSgcMa3wRhWbH4yuF3PCOgtbXrpkZDCDpAGUEXohsoWQ.0.woff2') format('woffnet2'), url/jsdelivr. projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }



It is said that the web font css provided by Google Fonts provides css according to the Korean characters.

So, I removed the fine background css made in one and added each one.

Instead, I matched the font name with the name provided by Google Fonts and applied the same name to my style.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap'); @font-face { font-family: 'Gowun Batang'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }



It would be correct to support woff2 in Mac and iPhone Safari, but I don't know what I'm doing wrong. I can't find it when I search for it, so I'm posting it as a general blog.


0 If you like the article, please click the heart~ It will be a strength to bloggers (SNS/login/advertising is not related)

Articles you might like

Contact map: customer management on the map
Contacts at a glance on the map, location-based contact management, view nearby contacts

Add a Comment

Email addresses are not disclosed. Required items *is indicated by

This posting is part of Coupang Partners' activities, and a certain amount of commission is provided accordingly.