0

First, I have created my style.css in the web part

@font-face {
  font-family: "Noto Sans Southeast Asian";
  font-weight: normal;
  src: local("Noto Sans Southeast Asian"), url("NotoSansSoutheastAsian-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans Southeast Asian Bold";
  font-weight: bold;
  src: local("Noto Sans Southeast Asian Bold"), url("NotoSansSoutheastAsian-Bold.ttf") format("truetype");
}

I have done with this instruction for the native iOS part custom font not working programmatically in swift

It didn't work

I got the suggestion that I have to encode my HTML page to base64 if I want to make it dynamically after that take this to the native part for added the local font for wkWebview

I have no idea of how to implement wkWebview to use my custom font in every page that my project loaded from Html file

I'm very beginning with wkWebview. My project uses swift 4.2

saleumsack
  • 43
  • 1
  • 1
  • 8

2 Answers2

1
func updateHTMLStringStyle(fontSize: String, bodyContent: String) -> String {

 return "<html><head><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'><meta name='theme-color' content='#000000'><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /><meta name='theme-color' content='#000000'><meta name='msapplication-navbutton-color' content='#5A9C14'><meta name='apple-mobile-web-app-status-bar-style' content='#000000'><style>a:link { color: blue; }</style><link href='https://fonts.googleapis.com/css?family=ProximaNova-Regular' rel='stylesheet'><style>:root,* {font-family: ProximaNova-Regular;font-size: \(fontSize);color: "rgb(216, 216, 216)");text-align: left;-webkit-user-select: none;user-select: none;}</style></head><body>\(bodyContent ?? "")</body></html>"

}       

You can customize font style, text color, font size in this HTML format as per your requirement. Pass webview content and font size in above function.

Use function

webViewBody.loadHTMLString((self.updateHTMLStringStyle(fontSize: "21px"))!, baseURL: nil)

I Hope, this will be work.

  • Thanks you, For my case, my purpose was to making all html file that loaded from website to change the font to my custom font. Your answer just make the static page for using native local font. I've try with your answer and it won't works for my case – saleumsack Dec 18 '19 at 01:56
0

For my case I solved this by editing at the web part at my style.css and uploaded the WOFF font type to my website then linked to it.

I just known that iOS safari has support WOFF & WOFF2 since iOS 10.*

@font-face {
  font-family: "Noto Sans Southeast Asian";
  src: local("Noto Sans Southeast Asian"), 
       url(LINK_TO_FONT/NotoSansSoutheastAsian-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: "Noto Sans Southeast Asian Bold";
  src: local("Noto Sans Southeast Asian Bold"), 
       url(LINK_TO_FONT/NotoSansSoutheastAsian-Bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;

}
saleumsack
  • 43
  • 1
  • 1
  • 8