CƯỚI HỎI

[NEW] วิธีใส่ฟ้อนต์ไทยลงในเว็บไซต์ ด้วย CSS3 @font-face แบบง่าย ๆ !! | font การ์ดงานแต่ง ภาษาไทย – Sambeauty

font การ์ดงานแต่ง ภาษาไทย: นี่คือโพสต์ที่เกี่ยวข้องกับหัวข้อนี้

เห็นมีหลายคนถามมาทาง เพจ Designil.com ครับว่า เราจะใส่ฟ้อนต์ไทยบนหน้าเว็บไซต์ได้ยังไง, ต้องตัดเป็นรูปมั้ย, เสียเงินมั้ย, ใช้ CSS3 หรือ Flash ช่วยดี ฯลฯ วันนี้ผมมีคำตอบมาให้ครับ

ก่อนอื่นมาดูกันก่อนว่าการใส่ฟ้อนต์สวย ๆ ลงในเว็บไซต์ มันทำงานยังไง

Nội dung bài viết

การใส่ฟ้อนต์สวย ๆ ในเว็บไซต์อย่างง่าย

วิธีที่ง่ายที่สุดในการใส่ฟ้อนต์ลงเว็บไซต์ ก็แค่ใส่ชื่อฟ้อนต์เข้าไปด้วย CSS font-family เลยครับ เช่น

font-family: 'Designil Font', 'Helvetica', sans-serif;

Font-family สามารถใส่ได้หลายค่าครับ ในตัวอย่างด้านบนผมใส่ฟ้อนต์แรกชื่อ Designil Font ฟ้อนต์ที่สองชื่อ Helvetica และฟ้อนต์ที่สามชื่อ sans-serif มาดูกันว่ามันทำงานยังไง

  1. Web Browser จะพยายามดึงฟ้อนต์แรกมาแสดงก่อนครับ ในที่นี้คือ Designil Font ซึ่งถ้าไม่ได้ใช้ CSS3 @font-face ใส่เข้ามา (วิธีใส่จะอธิบายในบทความนี้) มันก็จะพยายามหาในเครื่องคนเข้าเว็บครับว่ามีมั้ย ถ้ามีก็ดึงมาแสดง
  2. ถ้าหาฟ้อนต์แรกไม่เจอ มันจะวิ่งไปหาฟ้อนต์ที่ 2 อัตโนมัติ นั่นคือ Helvetica ซึ่งมีอยู่ในเครื่อง Mac ทุกเครื่องครับ ถ้าหาไม่เจอมันก็จะไปฟ้อนต์ต่อไป
  3. ถ้าหา Helvetica ไม่เจอ มันจะดึงฟ้อนต์สุดท้าย คือ sans-serif มาแสดง ซึ่ง sans-serif คือ ฟ้อนต์ไหนก็ได้ในเครื่องคนเข้าเว็บ ที่เป็นแบบไม่มีหาง เช่น ฟ้อนต์ Arial, Microsoft Sans Serif เป็นต้นครับ

เทคนิคเสริม: ใช้ font-family เซ็ตฟ้อนต์ไทยกับอังกฤษแยกกัน

วิธีข้างต้น เราสามารถมาปรับใช้กับกรณีที่มีฟ้อนต์ภาษาอังกฤษที่เราชอบมาก แต่ฟ้อนต์นั้นไม่สนับสนุนภาษาไทย เลยอยากเอามาจับคู่กับฟ้อนต์ไทยอีกตัว ก็สามารถทำได้ด้วย CSS font-family ล้วน ๆ ครับ ดังนี้

ตัวอย่างการใช้ฟ้อนต์ไทยกับอังกฤษ คนละฟ้อนต์กันตัวอย่างการใช้ฟ้อนต์ไทยกับอังกฤษ คนละฟ้อนต์กัน ด้วย CSS font-family

font-family: 'ชื่อฟ้อนต์อังกฤษ', 'ชื่อฟ้อนต์ไทย', sans-serif;

หลักการทำงานมันจะเหมือนกับโค้ดตัวอย่างอันแรกเลยครับ ดังนี้ (เทสใน Chrome & Firefox แล้ว ได้ผลเหมือนกัน)

  1. Web Browser พยายามหาฟ้อนต์แรก (ฟ้อนต์อังกฤษ) มาแสดงผล ซึ่งพอเอามาแสดงผลแล้ว จะพบว่าฟ้อนต์อังกฤษมีแค่ตัวอักษร A – Z แต่ตัวภาษาไทยแสดงผลไม่ได้ เลยแสดงผลตัวอักษรอังกฤษด้วยฟ้อนต์แรก แล้วหาต่อไป
  2. เจอฟ้อนต์ที่สอง (ฟ้อนต์ไทย) ซึ่งส่วนใหญ่ฟ้อนต์ไทยมีทั้ง A-Z และ ก-ฮ อยู่แล้ว แต่ A-Z ถูกฟ้อนต์ในข้อ 1. แสดงผลไปแล้ว เลยเหลือภาษาไทย ก-ฮ ให้ถูกแสดงผลด้วยฟ้อนต์ที่ 2
  3. ถ้าหาฟ้อนต์ 1 กับ 2 ข้างต้นไม่เจอ จะแสดงผลด้วยฟ้อนต์ sans-serif ธรรมดา

อีกวิธีหนึ่ง คือ ใช้ CSS unicode-range กำหนดได้เลยว่า ฟ้อนต์นี้จะให้แสดงผลใน Unicode ไหน – Unicode ไหน โดยตัวอักษรแต่ละตัวจะมีค่า Unicode ของมันอยู่

ตัวอย่างการใช้ Unicode Range เช่น การกำหนดให้ฟ้อนต์ไทยแสดงเฉพาะภาษาไทย ทำได้ดังนี้

@font-face {
  font-family: 'Designil Thai Font';
  unicode-range: U+0E00–U+0E7F;
}

ซึ่ง U+0E00 – U+0E7F คือ Range ของตัวหนังสือภาษาไทยนั่นเองครับ

การแปลงฟ้อนต์ไทยมาใช้ในเว็บไซต์ ด้วย CSS3 @font-face

จากด้านบนเรารู้วิธีใส่ฟ้อนต์ไทยใน CSS ด้วย font-family แล้ว ต่อมาก็จะมาดูกันว่าถ้าเรามีไฟล์ฟ้อนต์ที่ Download มาเป็นไฟล์ .TTF หรือ .OTF จะเอามาใส่ในเว็บไซต์เพื่อให้ font-family ดึงมาแสดงได้ยังไง

ปกติเวลาเราดาวน์โหลดฟ้อนต์จาก F0nt.com แหล่งโหลดฟ้อนต์ไทยรายใหญ่ ก็จะมาเป็น .TTF หรือ .OTF นี่แหละครับ

วิธีการแสดงผลฟ้อนต์ที่ไม่มีในเครื่องผู้เข้าชม สามารถทำได้ 2 วิธีหลัก ๆ ครับ

แอดมินก็หวังว่าในอนาคตจะมีการนำฟ้อนต์ไทยมาทำเป็น Online Font Service บ้าง ถ้าคนทำฟ้อนต์ท่านใดสนใจ ติดต่อมาทางเพจ Designil.com ได้เลยครับ อยากทำจริง ๆ นะ

เรามาดู ขั้นตอนการแปลงไฟล์ฟ้อนต์ (นามสกุล .TTF, .OTF) ให้ใช้ในเว็บไซต์ได้ กันเลย

1. อัพโหลดไฟล์ฟ้อนต์ผ่าน FontSquirrel.com Web Font Generator

หลังจากดาวน์โหลดฟ้อนต์ไทยมาแล้ว (เช่น จาก F0nt.com) ก็ไปที่หน้าเว็บไซต์ FontSquirrel Web Font Generator ครับ

READ  Cung cấp áo dài bưng mâm quả,cung cap ao dai bung mam qua | áo dài bưng mâm tại Sambeauty

1) คลิกปุ่มอัพโหลดฟ้อนต์

2) คลิก Expert… เพื่อแสดง Option เพิ่มขึ้น

ข้อควรระวัง: ถ้าฟ้อนต์มีหลายน้ำหนัก (เช่น Light, Regular, Semi-bold, Bold) ควรจะเลือกใช้ในเว็บแค่ 1-2 น้ำหนัก เท่านั้น เพราะยิ่งมีเราใช้หลายน้ำหนัก ยิ่งมีไฟล์ฟ้อนต์เยอะ และทำให้เว็บไซต์โหลดนานขึ้นตามไปด้วย ปกติผมจะเลือกแค่น้ำหนัก Regular กับ Bold หรือ Semi-bold แล้วแต่ดีไซน์ของฟ้อนต์

ข้อไม่ควรระวัง: …แต่โชคดีว่าฟ้อนต์ฟรี (ทั้งไทยและต่างประเทศ) ส่วนใหญ่จะมีไม่กี่น้ำหนักครับ บางฟ้อนต์แจกมาแค่น้ำหนักเดียวด้วยซ้ำ #น้ำตาจิไหลขอแชร์นะคะ

RSU Thai Font Face Webตัวอย่างการนำฟ้อนต์ RSU ไปใช้ทำ @font-face

2. ติ๊ก No Subsetting แล้วดาวน์โหลดฟ้อนต์ได้เลย

3) หลังจากกด Expert… แล้ว จะมี Option โผล่มาให้เลือกเยอะแยะไปหมด ให้เลื่อนลงมาหาหัวข้อ Subsetting แล้วเลือก No Subsetting ส่วน Option อื่น ๆ ไม่ต้องสนใจ

4) กดติ๊กถูกเพื่อยอมรับข้อตกลง แล้วกดปุ่ม Download Your Kit ได้เลย

ในขั้นตอนการ Download ฟ้อนต์ต้องรอสักพักนึงครับ ประมาณ 30 – 60 วินาทีต่อฟ้อนต์ ซึ่งยิ่งแปลงฟ้อนต์หลายน้ำหนักก็จะยิ่งใช้เวลาเยอะ เราจะดูได้จากด้านบนสุดว่ากำลังประมวลผลฟ้อนต์ไหนอยู่

3. เปิดไฟล์ ZIP ที่ดาวน์โหลดจาก Font Squirrel

เมื่อเปิดไฟล์ ZIP ออกมาจะพบกับไฟล์เยอะแยะมากมาย ไม่ต้องตกใจครับ แบ่งได้ง่าย ๆ ดังนี้

  1. ชื่อฟ้อนต์-demo.html – เปิดไฟล์นี้ใน Web Browser เพื่อดูได้เลยว่าฟ้อนต์ที่เราแปลงมา แสดงผลได้ถูกต้องมั้ย
  2. ชื่อฟ้อนต์.eot, .ttf, .woff, .woff2 – เป็นไฟล์ฟ้อนต์ที่เราต้องอัพขึ้นไปบนเซิร์ฟเวอร์ เพื่อให้แสดงผลในหน้าเว็บไซต์ได้ครับ ที่ต้องมีไฟล์หลายนามสกุลก็เพราะว่า แต่ละ Web Browser (Internet Explorer, Firefox, Chrome, iPhone Safari, Android) ต้องใช้นามสกุลไฟล์แตกต่างกัน
  3. โฟลเดอร์ specimen_files – เป็นไฟล์สำหรับหน้า demo ครับ ไม่ต้องใช้
  4. stylesheet.css – โค้ด CSS สำหรับดึงฟ้อนต์มาแสดงในหน้าเว็บไซต์

ถ้าเราเปิด demo (ข้อ 1.) เห็นว่าแสดงผลถูกต้องแล้ว ก็อัพโหลดไฟล์ฟ้อนต์ต่าง ๆ (ข้อ 2.) ขึ้นไปในเว็บไซต์เราเลยครับ หลังจากนั้นก็ก็อปปี้โค้ดจาก stylesheet.css (ข้อ 4.) ไปใส่ด้านบนสุดในไฟล์ CSS ของเรา

โค้ดจาก Stylesheet.css จะหน้าตาประมาณนี้ครับ

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on May 19, 2015 */

@font-face {
    font-family: 'rsuregular';
    src: url('rsu_regular-webfont.eot');
    src: url('rsu_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('rsu_regular-webfont.woff2') format('woff2'),
         url('rsu_regular-webfont.woff') format('woff'),
         url('rsu_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rsubold';
    src: url('rsu_bold-webfont.eot');
    src: url('rsu_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('rsu_bold-webfont.woff2') format('woff2'),
         url('rsu_bold-webfont.woff') format('woff'),
         url('rsu_bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

สังเกตที่บรรทัด font-family ครับ มันจะบอกชื่อฟ้อนต์ที่เราต้องไปใส่ใน CSS font-family เพื่อทำให้ฟ้อนต์นี้แสดงผล ในกรณีนี้คือ

font-family: 'rsuregular';

และ

font-family: 'rsubold';

แปลว่าเวลาเราจะนำฟ้อนต์เหล่านี้ไปใช้งาน ก็เขียนโค้ดแบบนี้ได้เลย

div {
  font-family: 'rsuregular', sans-serif;
}

เพียงเท่านี้ก็จะได้ฟ้อนต์ไทยสวย ๆ มาแสดงผลในหน้าเว็บไซต์แล้วครับ

ข้อควรระวัง: ไฟล์ฟ้อนต์ ต้องอยู่โฟลเดอร์เดียวกับไฟล์ CSS

จำโค้ดที่เราก็อปปี้จากไฟล์ Stylesheet.css ไปใส่ในไฟล์ CSS ของเราได้มั้ยครับ? มันจะมีการเรียกใช้ฟ้อนต์ด้วย url(…) อยู่ เช่น

src: url('rsu_bold-webfont.eot');

ซึ่งการเรียก Path นี้จะเหมือนกับการเรียกรูปผ่าน URL เลยครับ คือ ถ้าเขียนแบบ url(‘ชื่อไฟล์’) แปลว่า ไฟล์ฟ้อนต์ต้องอยู่ในโฟลเดอร์เดียวกับไฟล์ CSS หรือถ้าเราต้องการย้ายฟ้อนต์ไปเก็บไว้ในโฟลเดอร์ชื่อ fonts อีกที ก็ต้องเปลี่ยน Path เป็น

src: url('fonts/rsu_bold-webfont.eot');

เป็นต้นครับ ถ้าใส่ในเว็บแล้วฟ้อนต์ไม่แสดง ให้เช็ค Path ก่อนเลยว่าใส่ถูกมั้ย

แล้วมีฟ้อนต์ไทยไหนสวย ๆ ที่เหมาะกับการใช้งานบนเว็บไซต์บ้าง ?

ฟ้อนต์แต่ละฟ้อนต์มีลิขสิทธิ์ไม่เหมือนกันนะครับ บางฟ้อนต์ฟรี แต่ใช้ในเว็บไซต์ไม่ได้ (ต้องจ่ายเงินเพิ่ม) หรือบางฟ้อนต์เสียเงินซื้อมา แต่เราก็ไม่ได้ลิขสิทธิ์ในการแปลงเป็น Web Font ก็มีครับ ถ้าพลาดไปแปลงฟ้อนต์เสียเงินอาจจะจนได้ ต้องระวังตรงนี้ไว้ด้วยครับ

ถ้าอยากหลีกเลี่ยงปัญหาลิขสิทธิ์ แอดมินขอแนะนำ ฟ้อนต์สวย ๆ 12 แบบจากคัดสรรดีมาก ใน Google Fonts ซึ่งทุกฟ้อนต์ในนี้ใช้บนเว็บฟรีทั้งหมด (แต่ใช้ในงานพิมพ์ไม่ฟรีนะครับ ระวังตรงนี้ด้วย)

ในบทความหน้าเราจะมาดูกันครับว่าฟ้อนต์ไทยไหนบ้างที่สวย ๆ และสามารถนำมาใช้บนเว็บได้ครับ ถ้าท่านเห็นว่าบทความนี้มีประโยชน์ และอยากอ่านตอนต่อไป อยากให้ช่วยกด Share บทความนี้เพื่อเผยแพร่ความรู้ดี ๆ กันด้วยครับ :)

ถ้ามีคนสนใจเยอะ บทความใหม่มาเร็ว ๆ นี้แน่นอน หรือจะแวะไปพูดคุยกันใน Designil Facebook Page ก่อนก็ได้ครับ

อ่านจบแล้ว ? เราแนะนำบทความนี้

[Update] รวม ฟอนต์ภาษาอังกฤษสวยๆ มีทั้งแบบ ตัวเขียน วินเทจ อักษรเท่ๆ | font การ์ดงานแต่ง ภาษาไทย – Sambeauty

ฟอนต์ภาษาอังกฤษสวยๆ เป็นสิ่งที่จำเป็น เพราะเวลาที่คุณเขียนบล็อก เว็บไซต์ ออกแบบรูปกราฟิก หรือ สื่อสิ่งพิมพ์ คุณไม่ได้ใช้แค่ภาษาไทยเท่านั้น แต่คุณยังใช้ภาษาอังกฤษด้วย ซึ่งหากคุณใช้ฟอนต์ได้เหมาะสมกับเนื้อหาและธีมของงาน ก็จะช่วยดึงดูดความน่าสนใจของผู้อ่านได้เป็นอย่างมาก

เพื่อให้ฟอนต์ออกมาสวยอย่างครบสูตร วันนี้เราเลยขอรวบรวมฟอนต์ภาษาอังกฤษแบบสวยๆ ทั้งฟรีและเสียเงิน มีทั้งสไตล์ Serif (มีเชิง) San-Serif (ไม่มีเชิง) และฟอนต์อังกฤษลายมือตัวเขียนสวยๆ มีอะไรบ้าง มาดูกันเลย!

ฟอนต์ภาษาอังกฤษ ตัวเขียนสวยๆ เท่ดูดี โหลดฟรี

1. Great Vibes

cr:https://www.1001fonts.com/great-vibes-font.htmlcr:https://www.dafontfree.co/great-vibes-font-free/

ฟอนต์ภาษาอังกฤษตัวเขียน โหลดฟรี สุดฮิต ลายเส้นเล็กบาง ขอบอักษรสวยเรียบ ให้ความรู้สึกเรียบหรูดูแพง เหมาะใช้กับงานที่เป็นทางการหรือกึ่งทางการก็ได้ เช่น แบรนด์สินค้า เสื้อผ้าผู้หญิง เครื่องสำอาง หรือใช้ในคาเฟ่ ร้านอาหารสไตล์โมเดิร์นก็เหมาะครับ

ค่าใช้จ่าย: ฟรี for personal use & commercial use

ดาวน์โหลดได้ที่ : https://www.fontsquirrel.com/fonts/great-vibes

2. windsong

Cr:https://fontswan.com/windsong-font/Cr:https://fontswan.com/windsong-font/

font ตัวเขียนภาษาอังกฤษ สไตล์ elegant ให้ความรู้สึก สง่างาม เท่ๆ คูลๆ เหมาะสำหรับใช้ในสิ่งพิมพ์และเอกสาร เช่น การ์ดงานแต่ง งานแทงค์กิ้วปาร์ตี้ โลโก้สินค้า หรือใช้เป็น e-Signature ก็ได้ครับ

READ  SBD 41: TRẦN ÁNH NGUYỆT - 7 Tuổi - Hà Nội | Bình Chọn HOA KHÔI ẢNH PRINCESS ROSES ANGEL BABY | cho thuê váy dạ hội hà nội mới nhất

ค่าใช้จ่าย: ฟรี for personal use & commercial use

ดาวน์โหลดได้ที่ : https://fontswan.com/windsong-font/

3. Ludicrous

Cr:https://missymeyer.com/ludicrous-free-fontCr:https://missymeyer.com/ludicrous-free-fontCr:https://missymeyer.com/ludicrous-free-font

ฟอนต์อังกฤษที่ให้อารมณ์ น่ารัก คิวท์ๆ รื่นเริงสดใส อบอุ่น จึงเหมาะกับแบรนด์ที่มีภาพลักษณ์ขายความสุขสดใส เช่น ขนมเค้ก เบเกอรี่ น้ำหวาน สัตว์เลี้ยง คาเฟ่บรรยากาศน่ารักๆ เป็นต้น หรือจะเป็นเขียนแคปชั่นแนววัยรุ่นใสๆ ก็ใช้ได้ดีเลย

ค่าใช้จ่าย: ฟรี for personal use & commercial use

ดาวน์โหลดได้ที่ : https://missymeyer.com/ludicrous-free-font

4. SERENDIPITY

Cr: https://pixelbuddha.net/fonts/free-font-serendipity-script

ฟอนต์ตัวเขียนอังกฤษ ลายเส้นโค้งมนเรียบ ให้ความรู้สึกลื่นไหลสบายๆ เหมาะสำหรับใช้ออกแบบสินค้าออฟฟิศหรือบ้าน เช่น โต๊ะ เก้าอี้ เครื่องเขียน ของแต่งบ้าน หรือใช้ในงานอีเวนท์ที่มีธีมกึ่งทางการ พูดคุยสบายๆ ก็ได้ครับ

ค่าใช้จ่าย: ฟรี for personal use & commercial use

ดาวน์โหลดได้ที่ : https://pixelbuddha.net/fonts/free-font-serendipity-script

5. Pacifico

https://www.dafontfree.co/pacifico-font/https://www.dafontfree.co/pacifico-font/

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

ค่าใช้จ่าย: ฟรี for personal use & commercial use

ดาวน์โหลดได้ที่ : https://www.dafontfree.co/pacifico-font/

7. Variane Script

Cr: https://www.dafontfree.io/variane-script-font-free/Cr: https://www.dafontfree.io/variane-script-font-free/

ฟอนต์ภาษาอังกฤษ วินเทจ ใช้ฟรี ลายเส้นสไตล์คลาสสิคย้อนยุค เหมาะสำหรับ เช่น คาเฟ่ ร้านอาหาร โลโก้ ชื่อแบรนด์ เสื้อผ้าสไตล์แนววินเทจครับ

ค่าใช้จ่าย: ฟรี for personal use & commercial use

ดาวน์โหลดได้ที่ : https://www.dafontfree.io/variane-script-font-free/

ฟอนต์ภาษาอังกฤษ ตัวเขียนสวยๆ เกรดพรีเมี่ยม

1. Honeycomb

Cr:https://elements.envato.com/honeycomb-fontCr: https://elements.envato.com/honeycomb-font

ฟอนต์ตัวเขียนภาษาอังฤษ Premium ยอดฮิตในปัจจุบัน จุดเด่น คือลายเส้นที่สวยงาม อ่านง่าย ให้ความรู้สึกสดชื่นแจ่มใส แต่แฝงความสง่าสงามในตัว จึงสามารถใช้งานได้เกือบทุกรูปแบบ เรียกว่าถ้าคุณจะเสียเงินซื้อฟอนต์ตัวเขียนภาษาอังกฤษสักตัว นี่คือฟอนต์แนะนำเลยครับ

ค่าใช้จ่าย: เสียเงิน

ดาวน์โหลดได้ที่ : https://elements.envato.com/honeycomb-font

2. CLATTERING

ฟอนต์ภาษาอังกฤษ ตัวเขียนCr:https://www.behance.net/gallery/80778799/CLATTERING-FREE-BRUSH-TYPEFACE-FONTCr: https://www.behance.net/gallery/80778799/CLATTERING-FREE-BRUSH-TYPEFACE-FONT

ฟอนต์ตัวเขียนภาษาอังฤษ สไตล์ Bush Font สุดเจ๋ง จุดเด่นคือ ลายมือสวยงามเรียบหรูดีแพง เหมาะสำหรับใช้ทางแบรนด์ดิ้ง โลโก้ งานโฆษณา งานแต่งงาน หรืองานอื่นที่อยากใช้ฟอนต์ลายมือสวยๆ

ค่าใช้จ่าย: ฟรีเฉพาะ personal use

ดาวน์โหลดได้ที่ : https://www.behance.net/gallery/80778799/CLATTERING-FREE-BRUSH-TYPEFACE-FONT

3. HELLO SANTTINY

cr: https://www.behance.net/gallery/81994457/HELLO-SANTTINY-FREE-BRUSH-SCRIPT-FONTCr:https://www.behance.net/gallery/81994457/HELLO-SANTTINY-FREE-BRUSH-SCRIPT-FONT

อีกหนึ่ง font ภาษาอังฤษตัวเขียน สไตล์โมเดิร์น ที่มาแรงสุดๆ ลายเส้นให้อารมณ์เท่ๆ ดูดี ทันสมัยและสร้างสรรค์ เหมาะสำหรับงานออกแบบ แบรนด์ดิ้ง โฆษณา ร้านอาหาร คาเฟ่สไตล์โมเดิร์น

ค่าใช้จ่าย: ฟรีเฉพาะ personal use

ดาวน์โหลดได้ที่ : https://www.behance.net/gallery/81994457/HELLO-SANTTINY-FREE-BRUSH-SCRIPT-FONT

4. Wild Youth

Cr:https://www.dafontfree.io/wild-youth-font-free/

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

ค่าใช้จ่าย: ฟรีเฉพาะ personal use

ดาวน์โหลดได้ที่ : https://www.dafontfree.io/wild-youth-font-free/

5. RETRONIC – Vintage Script

Cr:https://elements.envato.com/retronic-vintage-script-UH5ZQLR

ฟอนต์อังกฤษสไตล์วินเทจสวยๆ ลายเส้นสไตล์คลาสสิคย้อนยุค ใครอยากได้ฟอนต์สไตล์โบราณสวยๆ เป็นอีกอีกหนึ่งฟอนต์ที่แนะนำครับ

ค่าใช้จ่าย: เสียเงิน

ดาวน์โหลดได้ที่ : https://elements.envato.com/retronic-vintage-script

ฟอนต์ตัวอักษรภาษาอังกฤษสวยๆ ประเภท Serif

1. Playfair Display

Playfair Display

Playfair Display ฟอนต์ตัวอักษรภาษาอังกฤษ ที่หาโหลดได้ฟรีๆ ที่ Google Fonts  ความโดดเด่นของฟอนต์นี้ก็คือ เป็นตัวหนังสือเหลี่ยม น้ำหนักเส้นไม่เท่ากันหมด แต่ออกมาแล้วดูคมชัด อ่านง่าย สไตล์ของฟอนต์ก็จะออกแนวเรียบง่าย คลาสสิค หากนำมาใช่เป็น Body ของคอนเทนต์ก็จะช่วยให้ตัวหนังสืออ่านง่ายขึ้นเยอะเลย

ค่าใช้จ่าย: ฟรี

โหลดได้ที่นี่: https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display

2. Palatino

ฟอนต์ภาษาอังกฤษ

ฟอนต์นี้เป็นอีกหนึ่งฟอนต์ที่อยู่ในตระกูล Old Style มีกลิ่นอาจวินเทจ เป็นฟอนต์ยุคแรกๆ ที่ถูกประดิษฐ์ขึ้นมาเลย บางคนอาจจะมองว่ามันจะดูเชยไปหรือเปล่า แต่ส่วนตัวมองว่า มันเป็นฟอนต์ที่คลาสสิคมากกว่า และยังมีลายเส้นที่ชัดเจน อ่านง่าย สบายตา ถ้าอยากให้ฟอนต์ในส่วนของ Body อ่านง่ายล่ะก็ นี่เป็นอีกฟอนต์ที่อยากแนะนำครับ

ค่าใช้จ่าย: เสียเงิน

โหลดได้ที่นี่: https://www.myfonts.com/fonts/linotype/palatino/

3. Caslon

ฟอนต์ภาษาอังกฤษ

Caslon เป็นอีกหนึ่ง ฟอนต์ตัวอักษรอังกฤษสวยๆ สไตล์ Serif ถูกคิดขึ้นมาตั้งแต่ปี ค.ศ. 1722 แม้จะถูกสร้างขึ้นมานานแล้ว แต่ก็ยังสามารถใช้ในเว็บไซต์เราได้ โดยไม่ให้ความรู้สึกว่าเชยเกินไป ประโยคสุดฮิตเมื่อถูกพูดถึงฟอนต์นี้ก็คือ “When in doubt, use Caslon.” ถ้าใครยังไม่รู้จะใช้ฟอนต์ภาษาอังกฤษ แบบไหนล่ะก็ เราขอแนะนำฟอนต์นี้เลยครับ

ค่าใช้จ่าย: เสียเงิน

โหลดได้ที่นี่: https://www.fontspring.com/fonts/adobe/adobe-caslon-pro

ฟอนต์ตัวอักษรภาษาอังกฤษสวยๆ ประเภท San-serif

1. Helvetica

ฟอนต์ภาษาอังกฤษ

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

ค่าใช้จ่าย: เสียเงิน

โหลดได้ที่นี่: http://www.ephifonts.com/free-helvetica-font-helvetica-normal.html

2. Futura

ฟอนต์ภาษาอังกฤษ

ใครชอบฟอนต์แบบตัวมนๆ กลมๆ อ่านง่ายหน่อย ขอแนะนำฟอนต์นี้เลยครับ Futura เป็นฟอนต์ที่มีมานานแล้วเช่นกันครับ ถูกสร้างและนำมาใช้ครั้งแรกประมาณปี ค.ศ. 1927 แต่ขอบอกว่าเป็น แบบอักษรอังกฤษสวยๆ ที่มีสไตล์ไม่เก่าเลย ด้วยความโค้งมน ช่องไฟเท่ากัน ตัวกลมๆ หน่อย ทำให้อ่านง่าย มองเห็นได้ชัด แต่ถ้าถามว่าเป็นฟอนต์ที่เหมาะกับการใช้กับ Heading หรือ Body มากกว่ากัน เราขอแนะนำว่า ใช้เป็น Heading จะเหมาะกว่า ด้วยความที่ตัวฟอนต์ค่อนข้างหนา ถ้าเป็น Heading จะช่วยทำให้ตัวหนังสือดูเด่นชัดขึ้น

ค่าใช้จ่าย: เสียเงิน

โหลดได้ที่นี่: https://www.fontspring.com/fonts/paratype/futura-pt

3. Avenir

ฟอนต์ภาษาอังกฤษ

ฟอนต์นี้จะมีดีไซน์ที่คล้ายคลึงกับ Futura แต่ว่าเส้นจะบางกว่า และช่องไฟจะห่างกว่า เหมาะทั้งใช้กับ Heading และ Body  ขึ้นอยู่กับความหนา-บางที่เราเลือกใช้ ถ้าอยากใช้เป็น Heading ก็ต้องเลือกแบบ Bold ถ้าจะใช้เป็น Body กับเนื้อหาในบล็อก ก็ควรเลือกเป็น Regular 

READ  Thu hồi sổ hộ khẩu từ 1/7, người dân cần lưu ý điều gì? | VTC Now | le an hoi mien nam mới nhất

ค่าใช้จ่าย: เสียเงิน

โหลดได้ที่นี่: http://www.myfonts.com/fonts/linotype/avenir/

4. Roboto

ฟอนต์ภาษาอังกฤษ

ฟอนต์ตระกูล San-serif ตัวสุดท้ายที่อยากแนะนำเลยก็คือ ฟอนต์ Roboto ความโดดเด่นของฟอนต์นี้ก็คือ อ่านง่าย ลักษณะฟอนต์ดูคลีนๆ เรียบหรู ช่องไฟระหว่างตัวอักษรมีความพอดี ไม่ห่างไป ไม่แน่นไป และก็มีรูปแบบฟอนต์เยอะ เช่น ตัวธรรมดา ตัวบาง ตัวหนา ไม่หมดเลย เลยทำให้เหมาะกับการนำไปใช้ทั้งในส่วนของ Heading และ Body เลย

ตัวอย่างการนำมาใช้

ค่าใช้จ่าย: ฟรี

โหลดได้ที่นี่: https://fonts.google.com/specimen/Roboto

สรุป

นี่ก็คือฟอนต์ภาษาอังกฤษสวยๆ ที่เราอยากแนะนำให้ลองใช้กันดูครับ เชื่อว่าคนทำเว็บไซต์ หรือคนเขียนคอนเทนต์ส่วนใหญ่จะใช้ภาษาไทยเป็นหลัก แต่จะต้องมีบางครั้งแน่ๆ ที่ใช้ภาษาอังกฤษในการสื่อสาร ซึ่งการใช้ฟอนต์ภาษาอังกฤษโดยเฉพาะ ก็จะช่วยให้หน้าเว็บไซต์ของคุณสวยขึ้น และอ่านง่ายมากขึ้น สร้างประสบการณ์ที่ดีต่อผู้ที่เข้ามาในเว็บไซต์ของคุณ ซึ่งฟอนต์ที่เราแนะนำไปก็มีทั้งแบฟรีและเสียเงิน แต่เรื่องหนึ่งที่อยากให้คุณเช็กกันดีๆ ก่อนใช้ก็คือ ฟอนต์นั้นสามารถเอามาใช้ในงานสาธารณะได้หรือเปล่า เพราะบางฟอนต์ก็จำกัดการใช้แค่ส่วนตัวเท่านั้นครับ

ตาคุณแล้ว

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


การ์ดแต่งงาน ฟอนต์สีทอง…ทำไง!!!


ค้นหาแรงบันดาลใจที่สร้างสรรค์เพิ่มเติมได้ที่ : https://https://www.youtube.com/chann…
ติดตามเรา! Facebook: https://www.youtube.com/channel/UC2wp0jwTXUaC8wwS6BeuyHw
Instagram: https://www.instagram.com/sobrightwed…
Twitter: https://twitter.com/SobrightW

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

การ์ดแต่งงาน ฟอนต์สีทอง...ทำไง!!!

งานราชการห้ามพลาด!! เทคนิคการใส่ Font Thai Saraban เจ๋งสุด


VDO จะมาแนะนำขั้นตอนการดาวน์โหลดและติดตั้งฟอนต์ราชการบนซอฟต์แวร์ CAD
สนใจทดลองใช้โปรแกรม GstarCAD
GstaCAD for Construction : https://bit.ly/3rZy68u
GstaCAD for Manufacturing : https://bit.ly/2QaZ4Ne
เรียนออนไลน์ เขียนแบบด้วย GstarCAD 2D CAD ฟรี!! ลงทะเบียน : https://bit.ly/34HbfUY
ติดตามเราได้ทุกช่องทางที่
📍FB https://www.facebook.com/ThailandGstarCAD/
☎️ Hotline : 0970608367
📱Line OA : https://lin.ee/5KNfEkK
📺 Youtube: https://www.youtube.com/user/ThaiGstarCAD/
🌐Web Product : https://www.applicadthai.com/gstarcad/
GstarCAD GstarCAD2020 AutoCAD AutoCAD2020 CAD โหลดGstarCAD CADทดลองใช้ สอนใช้GstarCAD ZW GstarCADภาษาไทย GstarCAD2019 GstarCADDownload วิธีการใส่FontThaiSaraban FontThaiSaraban งานราชการ

งานราชการห้ามพลาด!! เทคนิคการใส่ Font Thai Saraban เจ๋งสุด

วิธีเปลี่ยนฟอนต์ (Font) อักษรไทย Huawei Y9 2019 รุ่นอื่นๆ (No Root)


สอนวิธีเลี่ยนฟอนต์ สวยๆ Font .ttf ตัวหนังสือ อักษรไทย ภาษไทย บนมือถือ หัวเว่ย Huawei Y9 2019 และ Huawei หัวเว่ย รุ่นอื่นๆ โดยไม่ต้องรูทเครื่อง (No Root)
ไฟล์ที่ต้องโหลด มี 2ไฟล์ ดังนี้
1.ไฟล์ธีม (ตัวอย่าง Huawei Mate 20 Themes.hwt)
2.ไฟล์ฟอนต์ Font .ttf (ตัวอย่าง Choco Cooky.ttf)
3.โหลดแอพ Theme Editor For EMUI ติดตั้ง
https://play.google.com/store/apps/details?id=com.mixapplications.themeeditor\u0026hl=th
4.ทำตามขั้นตอนในคลิปวีดีโอ (สามารถรี หรือ ย้อนคลิปได้ ถ้าไม่เข้าใจ)
5.เสร็จแล้วก็จะได้ฟอนต์สวยๆ แล้วครับ.
ลิ๊งดาวน์โหลด ฟอนต์ (Font) อักษรไทย
ลิงค์ดาวน์โหลดฟอนต์น่ารักๆ Choco Cooky.ttf
https://drive.google.com/file/d/1EddF30MnGIT2vy0FiiEZqWQpv8Ij_VEY/view?usp=sharing
ลิงค์ดาวน์โหลด รวมฟอนต์น่ารักๆ สวยๆ อื่นๆ .ttf (แตกไฟล์zipเป้น .ttf)
https://www.beautyhunter.co.th/thaifont/

เว็บโหลดธีม.Hwt files HWtheme Huawei
https://www.themefoxx.com/2018/09/huaweimate20themes.html
ลิ๊งดาวน์โหลดธีม Download: Huawei Mate 20 Themes
https://www.droidmirror.com/download/downloadhuaweimate20themes1zip/
(สำรอง)
ลิ๊งดาวน์โหลดธีม Download: Huawei Mate 20 Themes
https://www.droidmirror.com/download/downloadhuaweimate20themes2zip/

ขอบคุณผู้ชมทุกท่าน สำหรับวิดีโอที่คุณได้รับชมจากช่อง Nifble Channel
วิธีเปลี่ยนธีม บนมือถือ Huawei | Android
Wallpapers, and Themes Mobile Themes for Huawei
โหลดธีมหัวเว่ย อักษรไทย ฟอนต์ (Font)
ธีมหัวเว่ยy9 ธีมhuawei หาย
ธีม huawei y6ii
วิธี สร้าง ธีม huawei
โหลดธีม huawei ไม่ได้
เปลี่ยนธีม huawei p10
ลบธีม huawei
MUI 9.0 on top Android 9 Pie
install ติดตั้ง ฟอนต์ ตัวหนังสือ

วิธีเปลี่ยนฟอนต์ (Font) อักษรไทย Huawei Y9 2019 รุ่นอื่นๆ (No Root)

พิมพ์การ์ดงานแต่งงาน ง่ายๆ ตอนที่ 1


พิมพ์การ์ดงานแต่งงาน ง่ายๆ ตอนที่ 1

โหลดฟอนต์ไทยสวยๆ ฟรี! ลงมือถือง่ายๆ\r |Nicetomeetyou


โหลดฟอนต์ไทยสวยๆ ฟรี! ลงมือถือง่ายๆ
🔸อยากมีฟอนต์ไทยสวยๆตกแต่งรูป
🔸อยากได้ฟอนต์ไทยทำปกคลิปวิดีโอ\r
.\r
อยากแต่งรูปด้วยตัวอักษรสวยๆโดดเด่น\r
ทั้งหมดนี้ ทำได้ง่ายๆด้วยมือถือ🤩\r
ฟอนต์ไทยฟรี! ใช้งานในทางที่ดีและเป็นประโยชน์\r
ขอบคุณเจ้าของฟอนต์มา ณ ที่นี้ค่ะ ❤️ ^^ \r
.\r
โหลดฟอนต์ ฟอนต์ไทย ตัดต่อวิดีโอด้วยมือถือ
_______________________________________________________________\r
.\r
ติดต่องาน nice.pannapat@gmail.com\r
หรือ FB Fanpage : Nicetomeetyou\r
.\r
Nice to meet you Nicetomeetyoo\r
ติดตามเรื่องราวดีๆ ความคิดดีๆ รีวิวน่ารักแบบซื่อตรง\r
เรื่องราวเกี่ยวกับเชียงใหม่~ และ // ตัดต่อวิดีโอด้วยมือถือ\r
\”ทุกอย่างทำด้วยมือถือ\” ที่นี่!\r
🙋คลิปใหม่ คลิก http://bit.ly/Nicetomeetyouu\r
.\r
\”ทุกคลิปวิดีโอในช่อง ใช้มือถือ Sumsung S8 ในการทำทั้งหมด\”\r
.\r
ติดต่องานและติดตาม❤️\r
FB: https://www.facebook.com/Nicetomeetyoo\r
YT: https://www.youtube.com/c/Nicetomeetyou\r
Line@ : @Nicetomeetyoo\r
IG: https://www.instagram.com/nicecii\r
Twitter: https://twitter.com/nice_cii\r
Blog:https://nice2meetyou.wordpress.com/\r
Website: \r
\r
ยินดีที่ได้รู้จักค่ะ ^^\r
Nicetomeetyou Nicetomeetyoo\r
ตัดต่อวิดีโอด้วยมือถือ เชียงใหม่\r
ท่องเที่ยว รีวิว Kinemaster ด้วยมือถือ

โหลดฟอนต์ไทยสวยๆ ฟรี! ลงมือถือง่ายๆ\r |Nicetomeetyou

นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูวิธีอื่นๆWedding

ขอบคุณมากสำหรับการดูหัวข้อโพสต์ font การ์ดงานแต่ง ภาษาไทย

Nguyễn Huệ

Xin chào các bạn mình tên là Nguyễn Huệ, website này do mình tạo ra với mục đích chia sẻ những kiến thức liên quan đến làm đẹp, trang điểm... Rất mong những thông tin do mình cung cấp mang lại nhiều giá trị cho bạn. Xin chân thành cảm ơn

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button