วิธีเพิ่มแบบอักษรบนเว็บของ Google ในรูปแบบ WordPress ในแบบ “ถูกต้อง”

แบบอักษรของ Google เป็นแหล่งข้อมูลฟรีที่น่าอัศจรรย์สำหรับนักออกแบบเว็บไซต์ ใน WPBv4 เราเริ่มใช้ชุดตัวอักษร Google ยอดนิยม: Oswald และ Lora ผู้ใช้ของเราบางคนถามเราถึงวิธีเพิ่มแบบอักษร Google Web ในธีม WordPress หากคุณจำได้เราจะแสดงวิธีเพิ่มแบบอักษร Google ใน WordPress Post Editor ในบทความนี้เราจะแสดงวิธีเพิ่ม Google Web Fonts ในธีม WordPress ของคุณ วิธีการที่เหมาะสม, เหมาะสำหรับประสิทธิภาพ.


ค้นหา Google Web Fonts ที่คุณชอบ

สิ่งแรกที่คุณต้องทำคือค้นหาแบบอักษร Google ที่คุณชอบ ตรงไปที่แบบอักษรของ Google และเรียกดูผ่านห้องสมุด เมื่อคุณค้นหาแบบอักษรที่คุณชอบให้คลิกที่ “Quick การใช้งาน” ปุ่ม.

แบบอักษรใช้งานด่วนจาก Google Fonts

เมื่อคุณคลิกปุ่มใช้งานด่วนคุณจะเข้าสู่หน้าใหม่ เลื่อนลงไปจนกระทั่งคุณเห็นกล่องคำแนะนำการใช้พร้อมรหัสที่คุณสามารถเพิ่มในเว็บไซต์ของคุณ.

รหัสฝังแบบอักษรของ Google

คุณจะเห็นว่ามีสามแท็บที่แตกต่างกันสำหรับการเพิ่มแบบอักษรในเว็บไซต์ของคุณ วิธีแรกคือวิธีมาตรฐานและวิธีที่แนะนำในการเพิ่มแบบอักษร Google ในเว็บไซต์ของคุณ แท็บที่สองใช้วิธีการ @import CSS และแท็บสุดท้ายใช้วิธีการของ JavaScript.

เราจะแสดงวิธีใช้แต่ละวิธีเหล่านี้และข้อดีและข้อเสีย.

วิดีโอสอน

สมัครสมาชิก WPBeginner

หากคุณไม่ชอบวิดีโอหรือต้องการคำแนะนำเพิ่มเติมให้อ่านต่อ.

เพิ่ม Google Web Fonts ในธีม WordPress

เราเห็นคนส่วนใหญ่ใช้สองวิธีแรก.

วิธีที่ง่ายที่สุดคือการเปิดธีมของคุณ style.css ไฟล์และวางรหัสแบบอักษรที่คุณได้รับในแท็บ @import เช่นนี้:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

นอกจากนี้คุณยังสามารถรวมคำขอแบบอักษรหลายรายการไว้ในที่เดียว นี่คือวิธีที่คุณจะทำ:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

วิธีนี้ง่ายสุด ๆ แต่ไม่ใช่วิธีที่ดีที่สุดในการเพิ่มแบบอักษร Google ในเว็บไซต์ WordPress ของคุณ การใช้วิธีการ @import บล็อกการดาวน์โหลดแบบขนานซึ่งหมายความว่าเบราว์เซอร์จะรอให้ไฟล์ที่นำเข้าดาวน์โหลดเสร็จก่อนที่จะเริ่มดาวน์โหลดเนื้อหาที่เหลือ.

หากคุณต้องใช้ @import อย่างน้อยที่สุดจะรวมหลายคำขอเป็นหนึ่งเดียว.

วิธีเพิ่มประสิทธิภาพการเพิ่มประสิทธิภาพของการเพิ่มแบบอักษรบนเว็บของ Google

วิธีที่ดีที่สุดในการเพิ่มแบบอักษรของ Google คือการใช้วิธีมาตรฐานซึ่งใช้วิธีการเชื่อมโยงแทนวิธีการนำเข้า เพียงใช้ URL ฟอนต์ที่คุณได้รับจากขั้นตอนที่ 1 หากคุณเพิ่มฟอนต์หลายตัวคุณสามารถรวมฟอนต์สองตัวเข้ากับ | ตัวละคร จากนั้นวางรหัสในส่วนหัวของธีมของคุณ.

คุณมักจะต้องแก้ไขไฟล์ header.php ของคุณและวางรหัสต่อไปนี้ไว้เหนือสไตล์ชีทหลักของคุณ ตัวอย่างจะมีลักษณะเช่นนี้:

โดยทั่วไปเป้าหมายคือการทำให้คำขอแบบอักษรเร็วที่สุดเท่าที่จะทำได้ ตามบล็อกของ Google Web Fonts หากมีแท็กสคริปต์อยู่ก่อนการประกาศ @ font-face ดังนั้น Internet Explorer จะไม่แสดงผลใด ๆ บนหน้าจนกว่าไฟล์แบบอักษรจะเสร็จสิ้นการดาวน์โหลด.

เมื่อคุณทำเสร็จแล้วคุณสามารถเริ่มใช้งานได้ในไฟล์ CSS ของธีมดังนี้:

h1 {
ครอบครัวแบบอักษร: ‘Oswald’, Helvetica, Arial, serif;
}

ขณะนี้มีเฟรมเวิร์กธีมจำนวนมากและธีมลูก ไม่แนะนำให้แก้ไขไฟล์ของธีมหลักหากคุณใช้เฟรมเวิร์กของธีมเพราะการเปลี่ยนแปลงของคุณจะถูกแทนที่ในครั้งต่อไปที่คุณอัปเดตเฟรมเวิร์กนั้น คุณจะต้องใช้ตะขอและตัวกรองที่นำเสนอให้คุณโดยธีมหลักหรือเฟรมเวิร์กนั้นเพื่อเพิ่มแบบอักษร Google อย่างถูกต้องในธีมลูกของคุณ.

จัดวางแบบอักษร Google อย่างเหมาะสมใน WordPress

อีกวิธีในการเพิ่มแบบอักษร Google ในเว็บไซต์ WordPress ของคุณคือการจัดทำแบบอักษรในไฟล์ function.php ของชุดรูปแบบหรือปลั๊กอินเฉพาะไซต์.

ฟังก์ชั่น wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, เท็จ);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

อย่าลืมแทนที่ลิงค์ตัวอักษรด้วยตัวคุณเอง.

กำลังโหลด Google แบบอักษรโดยใช้ JavaScript

สำหรับวิธีนี้คุณจะต้องคัดลอกรหัสในแท็บ JavaScript ในส่วนคำแนะนำการใช้แบบอักษรของ Google คุณสามารถวางรหัสนี้ในไฟล์ header.php ของธีมหรือธีมของเด็กได้ทันทีหลังจากแท็ก.

เคล็ดลับสุดท้ายของเราในการใช้ Google Web Fonts บนเว็บไซต์ของคุณคืออย่าโหลดแบบอักษรที่คุณไม่ได้ใช้ ตัวอย่างเช่นหากคุณต้องการน้ำหนักตัวหนาและน้ำหนักปกติเท่านั้นอย่าเพิ่มสไตล์อื่นทั้งหมด.

เราหวังว่าบทความนี้จะช่วยให้คุณเพิ่ม Google Web Fonts ในธีม WordPress ของคุณในแบบที่ถูกต้องเพื่อให้เว็บไซต์ของคุณสามารถโหลดได้อย่างรวดเร็ว คุณอาจต้องการอ่านคู่มือของเราเกี่ยวกับวิธีเพิ่มแบบอักษร Typekit ใน WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map