Hướng dẫn cách thêm Font chữ Google vào WordPress

1. Thêm Google Fonts vào WordPress là gì?

Thêm font google vào soạn sảo Editor WordPress hay còn gọi là tích hợp font chữ Google vào website WordPress là làm hết sức cần thiết để giúp chúng ta có thể chọn nhiều font chữ hơn trong quá trình viết bài.

Sau khi thêm xong chúng ta sẽ thấy được kết quả như sau:

2. Cách thêm Google Fonts vào WordPress dễ hiểu

Bước 1: Tạo cho tôi 1 file có tên là wpshare247-add-google-fonts.php ngay thư mục theme chúng ta đang sử dụng.

Bước 2:Chép toàn bộ nội dung bên dưới vào file vừa tạo

<?php
//Dành cho front-page
function wpshare247_google_fonts_int(){
    $fonts['Dancing+Script'] = 'wght@400;500;600;700';
    $fonts['Alfa+Slab+One'] = 'wght@400';
    $fonts['Oswald'] = 'wght@200;300;400;500;600;700';
    
    //add new your font here: $fonts['your+font+name'] = 'ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600';
    return $fonts;
}

function wpshare247_add_google_fonts(){
    $arr_fonts = wpshare247_google_fonts_int();
    if($arr_fonts){
        $s_fonts_api = '';
        foreach($arr_fonts as $name => $param){
            if($s_fonts_api){
                $s_fonts_api .= '&family='.$name.':'.$param;
            }else{
                $s_fonts_api .= 'family='.$name.':'.$param;
            }
        }
        
        $s_fonts_api .= '&display=swap';
        
        wp_enqueue_style( 'wpshare247-adding-google-fonts', 'https://fonts.googleapis.com/css2?'.$s_fonts_api, array(), null );
    }
}
add_action('wp_enqueue_scripts', 'wpshare247_add_google_fonts');


//Dành cho admin
function wpshare247_tiny_mce_before_init( $init ){
    $theme_advanced_fonts = "Andale Mono=andale mono,times;" .
                            "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;";
    
    //Add new your font here.............
    $arr_fonts = wpshare247_google_fonts_int();
    if($arr_fonts){
        foreach($arr_fonts as $name => $param){
            $name = str_replace("+", " ", $name);
            $theme_advanced_fonts .= $name."=".$name.";";
        }
    }
    //Add new your font end.............
    
    $init['font_formats'] = $theme_advanced_fonts .  "Wingdings=wingdings,zapf dingbats;";
    return $init;
}
add_filter( 'tiny_mce_before_init', 'wpshare247_tiny_mce_before_init' );

Bước 3: Nhúng file wpshare247-add-google-fonts.php functions.php

Bằng đoạn code sau:

require get_parent_theme_file_path( '/wpshare247-add-google-fonts.php' );

Như vậy là chúng ta vừa thêm thành công 1 số google font vào Website rồi đó. Bạn có thể thêm nhiều font hơn để sử dụng dễ hơn nhé.

3. Vì sao phải thêm Font chữ vào WordPress?

Giúp cho việc viết bài đa dạng các loại font, từ đó thu hút đọc giả hơn.

Video Hướng dẫn cách thêm Font chữ Google vào WordPress