How to change the default font of the Bootstrap site to LxgwWenKai?

2023-03-03 · 1143 · 6 min

# Preface

Recently, I saw an open source Chinese font on the Internet, which is very beautiful, so I studied it and deployed it in my blog. When you read this article, this site has been completely replaced by Xialu Wenkai up. This article will briefly introduce two methods of deploying third-party fonts in bootstrap.

# introduce

Open source address: github.com/lxgw/LxgwWenKai

This is a font with the style of Japanese textbooks, which has the characteristics of imitating Song and Kai, and has high readability. Some DIY font enthusiasts have successively used fonts such as imitation Song to complete this font. As a beautifying font for mobile phone systems, it has been transplanted into mobile phone systems such as iOS and Android, and has been welcomed by many mobile phone users. However, such a complete font has some shortcomings. First, there is a certain difference between the original font and the supplementary font, which makes some different characters (such as Klee’s original Chinese characters and supplementary simplified characters) feel inconsistent after being mixed. Second, since the fonts used for supplementary characters are commercial copyrighted fonts, they cannot be used for commercial purposes after completion, and there is a risk of infringement. In addition, in the current open source Chinese font library, there are very few scripts in Kai, and almost none in imitation Song.

# Public CDN deployment

Public CDN deployment is very simple, just add the following two lines of code to the <head> of your site's <html> file.

<link rel ="stylesheet" href="https ://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont/style.css">
<style>body{font-family:"LXGW WenKai",serif;}< /span></style>

# Private deployment

If you want a faster speed, you can deploy the font file yourself. You only need to download the font file, modify the relative link in the file, and put it in your root directory. The download address of the font file is as follows:

https://registry.npmjs.org/lxgw-wenkai-webfont/-/lxgw-wenkai-webfont-1.7.0.tgz

After downloading and modifying, put the subordinate code into the <head> of your site's <html>, and you can see the effect after refreshing.

<link rel ="stylesheet" href="You Custom CSS Address">
<style>body{font-family:"LXGW WenKai",serif;}< /span></style>

If you deploy on a different site or use a CDN, you may encounter Nginx cors cross-domain problems. The fix for Nginx is to add add_header, add the following code to your site’s Nginx configuration file and restart Nginx. .

server {
    ...
    add_header Access-Control-Allow-Origin *;
    ...
}

Tags :

# programming # Bootstrap

Copyright Notice :

This article is written by SaltyLeo. If the content is incorrect, please leave a message for feedback. When reprinting or quoting this article, please comply with the CC BY-NC-SA agreement, must be attributed, used non-commercially and share alike!

Comment :

Some Useful Scripts

Record some useful scripts, because the domestic raw.githubusercontent.com basically cannot be connected, and I have optimized the links of some scripts

toss around study