{"id":21957,"date":"2024-06-20T09:00:11","date_gmt":"2024-06-20T00:00:11","guid":{"rendered":"http:\/\/localhost\/blog\/?page_id=21957"},"modified":"2024-09-24T11:35:20","modified_gmt":"2024-09-24T11:35:20","slug":"guide-en-font","status":"publish","type":"post","link":"https:\/\/wordpress.pandassi.com\/hellopanda\/guide-en-font\/","title":{"rendered":"Change website font"},"content":{"rendered":"\n
<\/span>\"\"
\n
\n

HELLOPANDA MANUAL<\/p>\n\n\n\n

Change website font<\/strong><\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n
<\/path><\/path><\/g><\/svg><\/div><\/div>\n<\/div>\n\n\n\n
\n

This manual will no longer be in use starting from July 1, 2024.<\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n\n\n\n

Please note that after the addition of the custom management feature, resizing the website will now be replaced by the manual below.<\/p>\n\n\n\n

\n\n\n\n
\n
See the new manual<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
<\/path><\/path><\/g><\/svg><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
<\/path><\/path><\/svg><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\n

THIS GUIDE EXPLAINS
THE GOOGLE FONTS CDN METHOD,
NOT UPLOADING.<\/p>\n<\/div>\n\n\n\n

\n
\n
\ud83d\udcbb Go to Google Font site<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n
\n

It is advantageous to use commonly used CDN fonts as the website font. In certain situations, you may want to use a special font, but most people use Google fonts.<\/p>\n\n\n\n

The reason why Google Fonts are advantageous is because the download speed is dramatically faster due to caching in the case of widely used Google phones. The more popular fonts you use, the faster the loading speed will be.<\/p>\n<\/div>\n\n\n\n

\n

This guide requires some modifications to your PHP files. It is not difficult or complicated to modify, but since PHP files are server-side files, if an error occurs if modified incorrectly, it can lead to fatal results for the service.<\/p>\n\n\n\n

It is always a good idea to get into the habit of making a backup when modifying code.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
\n
\n
\n

01<\/strong><\/p>\n<\/div>\n\n\n\n

\n
\n

Find the font you want in Google Fonts<\/p>\n\n\n\n

hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

1.<\/p>\n\n\n\n

\n

Visit the Google Fonts site.<\/p>\n\n\n\n

\n
\ud83d\udcbb Go to Google Font site<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

2.<\/p>\n\n\n\n

\n

Once you find the font you want, click the \u201cGET FONT\u201d button.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

3.<\/p>\n\n\n\n

\n

Please select no more than two fonts if possible and include the fonts you want.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

4.<\/p>\n\n\n\n

\n

Select up to two fonts if possible, and once you have included the fonts you want, click the \u201c <> Get embed code <\/strong>\u201d button.
As I mentioned, this guide does not explain how to install using the \u201cDownload All\u201d function.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

5.<\/p>\n\n\n\n

\n

Among the fonts shown on the left side of the screen, check only the font you want to use.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

6.<\/p>\n\n\n\n

\n

In the Web tab, copy only the source part below.<\/p>\n\n\n\n

Font CDN address<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Font family name<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

7.<\/p>\n\n\n\n

\n

You are now ready to edit your code. If the code below is ready,
let’s move on to part 02<\/strong>.<\/p>\n\n\n\n

\n
\n
\n
\n
\n
\n

FONT CDN ADDRESS<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:wght@400;700&display=swap<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
\n
\n

FONT FAMILY NAME<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

‘Noto Sans KR’, ‘Roboto’<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n
\n
\n
\n
\n
\n
\n
\n

02<\/strong><\/p>\n<\/div>\n\n\n\n

\n
\n

Apply font address<\/p>\n\n\n\n

hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

\/wp-content\/themes\/hellopanda-theme\/inc\/<\/p>\n\n\n\n

Hellopanda_Common.php<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

public $font_style_url = 'https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@100;400;700&family=Roboto:wght@100;400;700&display=swap<\/strong>';<\/code><\/pre>\n<\/div>\n\n\n\n