วิธีนำเข้า Google Web Font ในไฟล์ CSS

ฉันทำงานกับ CMS ซึ่งฉันสามารถเข้าถึงไฟล์ CSS ได้เท่านั้น ดังนั้นฉันไม่สามารถรวมสิ่งใดไว้ในส่วนหัวของเอกสาร ฉันสงสัยว่ามีวิธีนำเข้าแบบอักษรเว็บจากภายในไฟล์ CSS หรือไม่

ใช้@importวิธีการ:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

เห็นได้ชัดว่า "Open Sans" ( Open+Sans) เป็นแบบอักษรที่นำเข้า ดังนั้นแทนที่ด้วยของคุณ หากชื่อของแบบอักษรมีหลายคำให้เข้ารหัส URL ด้วยการเพิ่ม+เครื่องหมายระหว่างแต่ละคำเหมือนที่ฉันทำ

ตรวจสอบให้แน่ใจว่าวาง@importที่ด้านบนสุดของ CSS ของคุณก่อนกฎใด ๆ

Google Fonts สามารถสร้าง@importคำสั่งให้คุณโดยอัตโนมัติ เมื่อคุณเลือกแบบอักษรแล้วให้คลิก(+)ไอคอนถัดจากแบบอักษร ที่มุมล่างซ้ายภาชนะชื่อ "1 Family Selected" จะปรากฏขึ้น คลิกที่มันและมันจะขยาย ใช้แท็บ "ปรับแต่ง" เพื่อเลือกตัวเลือกจากนั้นสลับกลับเป็น "ฝัง" และคลิก "@import" ภายใต้ "ฝังแบบอักษร" คัดลอก CSS ระหว่าง<style>แท็กลงในสไตล์ชีทของคุณ

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

ดีกว่าที่จะไม่ใช้ @import เพียงใช้องค์ประกอบลิงก์ดังที่แสดงไว้ด้านบนในส่วนหัวของเค้าโครงของคุณ

ดาวน์โหลดฟอนต์ ttf / ไฟล์รูปแบบอื่น ๆ จากนั้นเพิ่มตัวอย่างโค้ด CSS นี้:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

เพิ่มโค้ดด้านล่างในไฟล์ CSS ของคุณเพื่อนำเข้า Google Web Fonts

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

แทนที่ค่าพารามิเตอร์Open + Sansด้วยชื่อฟอนต์ของคุณ

ไฟล์ CSS ของคุณควรมีลักษณะดังนี้:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

1. เพียงไปที่https://fonts.google.com/
2. เพิ่มแบบอักษรโดยคลิก+
3. ไปที่แบบอักษรที่เลือก> ฝัง> @IMPORT> คัดลอก url แล้ววางในไฟล์. css ของคุณเหนือแท็กเนื้อหา
4. มันจบแล้ว.

ใช้แท็ก @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

นอกเหนือจากคำตอบข้างต้นแล้วให้พิจารณาเว็บไซต์นี้ด้วย https://google-webfonts-helper.herokuapp.com/fonts

ความได้เปรียบ:

• ช่วยให้คุณสามารถโฮสต์ฟอนต์ google เหล่านั้นด้วยตนเองเพื่อเวลาตอบสนองที่ดีขึ้น

• เลือกแบบอักษรของคุณ

• เลือกชุดตัวละครของคุณ
• เลือกสไตล์ / น้ำหนักแบบอักษรของคุณ
• เลือกเบราว์เซอร์เป้าหมายของคุณ
• และคุณได้รับตัวอย่าง CSS (เพิ่มลงใน CSS สไตล์ชีตของคุณ) พร้อมกับซิปไฟล์ฟอนต์เพื่อรวมไว้ในโครงการของคุณ

เช่น your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}

คุณยังสามารถใช้ @ font-face เพื่อเชื่อมโยงไปยัง URL http://www.css3.info/preview/web-fonts-with-font-face/

CMS รองรับ iframes หรือไม่ คุณอาจจะสามารถใส่ iframe ลงในส่วนบนของเนื้อหาได้เช่นกัน สิ่งนี้อาจจะช้ากว่าควรรวมไว้ใน CSS ของคุณ

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

ในการเลือกแบบอักษรคุณสามารถไปที่ลิงค์: https://fonts.google.com

เขียนชื่อตัวอักษรที่คุณเลือกจากเว็บไซต์โดยไม่รวมวงเล็บ

ตัวอย่างเช่นคุณเลือก Lobster เป็นแบบอักษรที่คุณต้องการ

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

จากนั้นคุณสามารถใช้สิ่งนี้ตามปกติเป็นฟอนต์ตระกูลในไฟล์ HTML / CSS ทั้งหมดของคุณ

ตัวอย่างเช่น

<h2 style="Lobster">Please Like This Answer</h2>

Jus ผ่านลิงค์

https://developers.google.com/fonts/docs/getting_started

เพื่อนำเข้ามาใช้สไตล์ชีท

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

เราสามารถทำได้อย่างง่ายดายใน css3 เราต้องใช้คำสั่ง @import วิดีโอต่อไปนี้อธิบายวิธีการทำเช่นนั้นได้อย่างง่ายดาย ดังนั้นไปข้างหน้าและระวัง

https://www.youtube.com/watch?v=wlPr6EF6GAo