{"id":9096,"date":"2025-12-04T04:46:57","date_gmt":"2025-12-04T04:46:57","guid":{"rendered":"https:\/\/cachsudung.com\/?p=9096"},"modified":"2025-12-04T04:46:57","modified_gmt":"2025-12-04T04:46:57","slug":"cach-them-font-chu-vao-wordpress","status":"publish","type":"post","link":"https:\/\/how.congdongso.net\/en\/how-to-add-custom-fonts-to-wordpress\/","title":{"rendered":"How to add fonts to wordpress text editor area"},"content":{"rendered":"

How to add fonts to wordpress<\/strong>. When you type text in WordPress, the editor is where you create and edit content for your website. However, the WordPress editor already has fonts, but they are too few and not enough for you to customize the content on your website. In this article, I will guide you. how to add font to wordpress editor<\/strong><\/a> Extremely fast to help you create your content easily and more beautifully<\/p>\n

How to add fonts to wordpress as you like<\/h2>\n

Quick action. Add fonts to the wordpress editor as you like. You need to do the following 4 steps.<\/p>\n

    \n
  1. Prepare your custom font, note that the font must be Vietnamese.<\/li>\n
  2. Create custom CSS file<\/li>\n
  3. Master the CSS rules for fonts so that fonts can work<\/li>\n
  4. Link Custom CSS Files to WordPress<\/li>\n<\/ol>\n

    See more.<\/strong><\/p>\n

      \n
    1. How to create a slider that runs super smoothly on flatsome<\/a><\/strong><\/li>\n
    2. Foxtool multi-purpose utility toolkit for website<\/a><\/strong><\/li>\n
    3. How to put category descriptions below products<\/a><\/strong><\/li>\n
    4. The code shows nice promotions for flatsome like Cellphones<\/a><\/strong><\/li>\n<\/ol>\n

      I. Prepare custom Vietnamese font<\/h3>\n

      First, you need to prepare a set of custom Vietnamese fonts that you want to put into the frame when editing text. For the simplest way, you can use Google fonts as the most standard. If you have a higher level, you can Vietnamese or get some suitable fonts.<\/p>\n

      Method 1: Using Google Fonts <\/strong>:<\/p>\n

      You can access the page on the website Google Fonts<\/a> to download then choose a font that you want to use for your website. At each specific font, this is the size of the font, there is an embed code for each font. See details as shown below.<\/p>\n

      \"How
      How to add fonts to wordpress text editor area<\/figcaption><\/figure>\n

      Method 2. Use custom fonts<\/strong>:<\/p>\n

      If you already have a custom font, the first thing you need to do is convert it to web font format. There are many online websites that allow you to do this. You can access website transfonter.org<\/a> to convert your computer's fonts into fonts for your website.<\/p>\n

      Step 1<\/strong>: Add fonts<\/p>\n

      Step 2<\/strong>: Convert<\/p>\n

      Step 3<\/strong>: Download<\/p>\n

      \"How
      How to add fonts to wordpress text editor area<\/figcaption><\/figure>\n

      Step 4<\/strong>: After you download the file, you proceed to unzip it and you will see the file as shown below. This file is the font file you use for the web environment.<\/p>\n

      \"How
      How to add fonts to wordpress<\/figcaption><\/figure>\n

      II<\/strong>: Create a custom CSS file so that the website can recognize the font<\/h2>\n

      For google fonts<\/h3>\n

      If you use Google font, you don't need to create it, just copy its link:
      \n\"How<\/p>\n

      For fonts that you want to upload yourself<\/h3>\n

      In case you create a font converted from your computer to a web font as I described above, you need to go to the themes or child theme folder and create a folder named fonts. Then upload all the font files you downloaded earlier into it.<\/p>\n

      \"How
      How to add fonts to wordpress<\/figcaption><\/figure>\n

      III. Add CSS rules for fonts<\/h2>\n

      For google fonts<\/h3>\n

      You will need to create a file in the Fonts section. For example, here I create it with the name addfont.css.\u00a0<\/strong>Copy the code below<\/p>\n

      @import <\/span>URL<\/span><\/span> ( <\/span>'https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display= swap'<\/span><\/span> );<\/span><\/pre>\n
      For fonts that you want to upload yourself<\/h3>\n
      \u2013 If you insert fonts from your computer, you must also create a file named addfont.css<\/strong> in the Fonts folder but only the code inside is different. The code inside will be as follows:<\/p>\n
      @font-face<\/span> { font-family<\/span>: 'Fz Manchester Signature'<\/span>; src<\/span>: URL<\/span>('fonts\/FzManchesterSignature.eot'<\/span>); src<\/span>: URL<\/span>('fonts\/FzManchesterSignature.eot?#iefix'<\/span>) format<\/span>('embedded-opentype'<\/span>), URL<\/span>('fonts\/FzManchesterSignature.woff2'<\/span>) format<\/span>('woff2'<\/span>), URL<\/span>('fonts\/FzManchesterSignature.woff'<\/span>) format<\/span>('woff'<\/span>), URL<\/span>('fonts\/FzManchesterSignature.ttf'<\/span>) format<\/span>('truetype'<\/span>), URL<\/span>('fonts\/FzManchesterSignature.svg#FzManchesterSignature'<\/span>) format<\/span>('svg'<\/span>); font-weight<\/span>: normal; font-style<\/span>: normal; font-display<\/span>: swap; }<\/pre>\n
      Note: How to add fonts to wordpress<\/strong> Whatever your font is, you should rename the font to the correct name and format as the font you uploaded. Avoid copying it exactly, which will cause your uploaded font to not work. Please see the details in the image below and follow the steps.<\/p>\n
      \"How
      How to add fonts to wordpress<\/figcaption><\/figure>\n
      \"How
      How to add fonts to wordpress<\/figcaption><\/figure>\n
      III. Link files using CSS to make fonts work<\/h2>\n
      This is the most important step of the article so that the fonts can work properly with the path, so please read the content below carefully!<\/p>\n
      \"How
      How to add fonts to wordpress<\/figcaption><\/figure>\n
      Initially, my text editor did not have a place to select the font I put in, so we had to pull it out using the code below. You just need to copy this code into the section function.php\u00a0<\/strong>that your child theme is using.<\/p>\n
      add_filter<\/span>('mce_buttons_2'<\/span>, 'add_size_and_font'<\/span>,888<\/span> ); function<\/span> add_size_and_font<\/span>( $options<\/span> <\/span>) <\/span>{ array_shift<\/span>( $options<\/span> ); array_unshift<\/span>( $options<\/span>, 'fontselect'<\/span>); return<\/span> $options<\/span>; }<\/pre>\n
      When you copy paste and save. Check and reload, you will see the image below is successful:<\/p>\n
      \"How
      How to add fonts to wordpress<\/figcaption><\/figure>\n
      Next, I need to declare the following code into the file. function.php <\/strong>to declare the order of priority of fonts appearing in turn<\/p>\n
      In the example, I need to add the Fz Manchester Signature font, so I will declare it as below. You can replace it with your font name, for both fonts added from Google or fonts uploaded by yourself.<\/strong><\/p>\n
      function list_list_font_add( $settings ) { global $settings_list_font; $settings['font_formats'] = "Fz Manchester Signature='Fz Manchester Signature',sans-serif;". 'Arial=arial,helvetica,sans-serif;'. 'Arial Black=arial black,avant garde;'. 'Book Antiqua=book antiqua,palatino;'. 'Comic Sans MS=comic sans ms,sans-serif;'. 'Courier New=courier new,courier;'. 'Georgia=georgia,palatino;'. 'Helvetica=helvetica;'. 'Impact=impact,chicago;'. 'Symbol=symbol;'. 'Tahoma=tahoma,arial,helvetica,sans-serif;'. 'Terminal=terminal,monaco;'. 'Times New Roman=times new roman,times;'. 'Trebuchet MS=trebuchet ms,geneva;'. 'Verdana=verdana,geneva;'. 'Webdings=webdings;'. 'Wingdings=wingdings,zapf dingbats;'; $settings_list_font = $settings; return $settings; } add_filter('tiny_mce_before_init', 'name_list_font_add');<\/pre>\n
      This \u201cFz Manchester Signature='Fz Manchester Signature',sans-serif<\/strong>;\u201d<\/strong>. is the font I added, if you look closely you will see it has accents \u201d<\/strong> but not '<\/strong> As in the lines below, the purpose is to give the added font the highest priority. If you want a font to be at the top, you just need to add that font, rename it, and add a dot. \u201d<\/strong>\u00a0<\/strong>and put it on the head<\/p>\n
      After adding the code in order, in the text editor you will have the order as in the list below:<\/p>\n
      \"How
      How to add fonts to wordpress<\/figcaption><\/figure>\n
      Next:<\/strong> is also an equally important step. This section will help fonts work in admin<\/p>\n
      You need to add more code to the file. function.php<\/strong> as follows:<\/p>\n
      function insert_css_vao_admin() { add_editor_style(get_stylesheet_directory_uri().'\/addfont.css' ); } add_action( 'admin_init', 'insert_css_input_admin' );<\/pre>\n
      You add the following code to run the font outside the interface:<\/p>\n
      add_action( 'wp_enqueue_scripts', 'chen_css_input_theme' ); function insert_css_intro_theme() { wp_enqueue_style( 'add-font-family', get_stylesheet_directory_uri().'\/addfont.css', array(),'1.0.1' ); }<\/pre>\n
      You are done with this step. The fonts will now work consistently between your admin editor and your web interface.<\/p>\n
      Conclude:<\/h2>\n
      So I have just guided you how to add fonts to wordpress in the text editor area. This is how to add fonts to the text editor area in WordPress. By following the above steps, you can easily customize the text appearance of your WordPress website by applying your own fonts.<\/p>\n
      This helps you create a unique website that suits your style. Try to apply and take advantage of the flexibility that WordPress brings to create the website you want. Hope this article will help you a lot. If you find the article useful, don't forget to subscribe. channel Facebook<\/a><\/strong> to get the latest news.<\/p>","protected":false},"excerpt":{"rendered":"
      C\u00e1ch th\u00eam font ch\u1eef v\u00e0o wordpress. Khi b\u1ea1n \u0111\u00e1nh v\u0103n b\u1ea3n trong trong WordPress, th\u00ec khung so\u1ea1n th\u1ea3o l\u00e0 n\u01a1i b\u1ea1n t\u1ea1o v\u00e0 ch\u1ec9nh s\u1eeda n\u1ed9i dung cho trang web c\u1ee7a b\u1ea1n. Tuy nhi\u00ean t\u1ea1i khung so\u1ea1n th\u1ea3o wordppress \u0111\u00e3 c\u00f3 font s\u1eb5n nh\u01b0ng n\u00f3 c\u00f2n qu\u00e1 \u00edt kh\u00f4ng \u0111\u1ee7 cho c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 …<\/p>","protected":false},"author":2,"featured_media":20183,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[262,267,534],"class_list":["post-9096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-font","tag-font-wordpress","tag-wordprees"],"_links":{"self":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/9096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/comments?post=9096"}],"version-history":[{"count":1,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/9096\/revisions"}],"predecessor-version":[{"id":21443,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/9096\/revisions\/21443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media\/20183"}],"wp:attachment":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media?parent=9096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/categories?post=9096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/tags?post=9096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}