Web Design
Mobile Internet
Brand Design
Innovative
News
Encyclopedias

Use Chrome to modify any WordPress theme font style and size

Date:2013-02-06 Source: Shangpin China Type: website encyclopedia
Word Size: small   medium   big

Like Quicl, many netizens use CSS to create a font style when editing articles for the sake of beauty. However, too many CSS styles used by articles have a great impact on the opening speed of the home page. The way to eradicate this problem is to modify the default font style and size of Wordpress themes. Although I have been using the method of modifying the article css before today, I spent a little long time on the Internet last night, and I suddenly felt uncomfortable when I saw other fonts on the website. So I thought, forget it, change the font of the theme!

As mentioned in the previous article, I really don't want to use FireFox anymore. I just use Chrome for element audit. Chrome is too user-friendly and very convenient. Select any text on the homepage - right click - review element to see the CSS container of the current content. After checking, it is found that there is no font family: or font size: in my sub container. Well, since the con doesn't exist, I'll go to the parent container to find it. The convenient ChromeDebug shows that both Font family and Font size are in the Body. The source CSS code is;

font-family:Arial, Helvetica, sans-serif;

font-size:12px; color:#b8babb; text-align:center;

Considering that I generally like "Microsoft IELTS", I will change it to "Microsoft IELTS", but what about the font size? After checking many texts on the Internet, they all say that 12px is the best choice, but I don't think so! The element review using Chrome found that the font size of my original theme's Body was 12px, but it felt very small. When browsing the blog site, I found that several of them are 13px. Use 13px font size. Tips: For the majority of Wordpress players, it is best to determine the appropriate css style locally before modifying the theme. Secondly, in order to avoid unexpected errors, please copy the code to the "Super Notepad" or "Dreamwater" backup, and use the system's own notepad gray to cause inexplicable problems. This method can be used for any theme. Since the font of its Wordpress theme is in the Body tag, the idea of our modification is to find the top-level Body container and modify its font. Let's revise the theme:

Log in with administrator permission in Wordprss background - select the "Edit" tab in the "Appearance" column, and then find "Style. css" at the bottom right of the page, and click it.

The top of the left edit box is the Body column. The body code (I believe most of the codes are the same as mine) is as follows:

body { margin:0; padding:0; background:url(img/back1.gif);

font-family: Arial, Helvetica, sans-serif;

font-size:12px; color:#b8babb; text-align:center; }

Add Microsoft Yahei before Arial. Remember that this comma is an English comma in Song typeface. Please pay attention! In font size, the 12px is changed to 13px. Some friends may say that it is so simple. I will change the color too! A lot of facts have proved that modifying color is an unwise choice. The theme producer knows more about website color matching than you do, and your modification may make the theme color completely unrecognizable

The following is the modified code,

body { margin:0; padding:0; background:url(img/back1.gif);

Font family: IELTS, Arial, Helvetica, sans serif;

font-size:13px; color:#b8babb; text-align:center; }

After saving the changes, return to any page, refresh it, and you can generally see the effect. If you can't see it, please clear the web cache!



Please contact our consultant

+86 10-60259772

Please provide your contact number. The project manager of shangpin China will contact you as soon as possible.