กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • add font to wordpress 4 way

    February 19, 2019

    1. Using CSS and @import ใส่ไปตรงในไฟล์ single.php หรือ index.php (ใช้ได้เฉพาะหน้าเแรก)

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

    หรือ

    <link href="https://fonts.googleapis.com/css?family=Athiti|Itim|Sriracha&subset=thai" rel="stylesheet">

    ถ้าใช้ code นี้ใน index.php ต้องวางใน <head> จะทำให้ เวลาแสดงผลหน้าเว็บ มันจะๆไม่โชว์ code css

    2. Using CSS and @import ใน style.css

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

    การใช้ @import ทำให้เว็บโหลดไฟล์นี้ทุกครั้ง ที่แสดงหน้าเว็บ จึงไม่เหมาะ

    3. Using a WordPress Template File

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

    หรือ

    <link href="https://fonts.googleapis.com/css?family=Athiti|Itim|Sriracha&subset=thai" rel="stylesheet">

    ให้วางระหว่าง <head>
    ถ้าใช้ code นี้ใน index.php จะทำให้ เวลาแสดงผลหน้าเว็บ มันจะไม่โชว์ code css

    4. Using @font-face

    @font-face {
  font-family: Roboto;
  src: url(http://localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
  font-weight: normal;
}

    ยังไม่ใช่วิธีการที่ดีที่สุด

    5. Enqueueing Fonts – The “WordPress Way”

    If you truly want to add custom fonts to WordPress in the correct way, you will use your functions.php file and the function  wp_enqueue_script or wp_enqueue_style.

    With their help, we can take the code snippets provided by the font sites. However, instead of copying them into a file, we will add them to the header via a function.

    What’s the difference between wp_enqueue_script and wp_enqueue_style? As their names suggest, one is for adding scripts, one for style sheets. Which one is right to use depends on how your custom fonts are provided from their source.

    For example, Google Fonts gives you fonts as style sheets. In that case, you would add them to your WordPress site this way:

    function add_google_fonts() {
  wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto' );
}

add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

    In contrast to that, fonts from Adobe Edge Web Fonts come as JavaScript. Therefore, to enqueue them on your site, the code would look like this:

    function add_adobe_fonts() {
  wp_enqueue_script( 'adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js' );
}

add_action( 'wp_enqueue_scripts', 'add_adobe_fonts' );

    Wasn’t so difficult, was it? Plus, you get extra points for doing it the WordPress way.

    Final Step: Call the Custom Fonts in Your Style Sheet

    Now that the fonts have been added to your site, you can officially use them. To do so, all that’s left is to add a declaration for the new font in your style sheet. For example, to change the font for your heading tags, you would use something like this:

    h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto';
}

    Note: Pay attention to how the service you are using specifies the CSS declaration for your fonts. On my test site, I seemingly couldn’t get Adobe Edge Web Fonts to work because they call Open Sans in CSS with open-sans as opposed to 'Open Sans' in Google Fonts.

    That’s it. You now know how to add custom fonts to WordPress manually. Congratulate yourself, this is some next-level knowledge! Obviously, same actions are possible via plugins. That’s what we will talk about next.

    6. ใช้ plugin

    How to Change & Add WordPress Fonts

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories

Uncategorized