WordPress Temalarına Google Web Yazı Tipleri “Doğru” Şekilde Nasıl Eklenir?

82 yorumBir Cevap Bırakın

1. Syed Balkhi says

   Tem 5, 2024 2:24 pm'de

   Hey WPBeginner readers,
   Did you know you can win exciting prizes by commenting on WPBeginner?
   Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
   You can get more details about the contest from here.
   Start sharing your thoughts below to stand a chance to win!

2. Armando says

   Tem 9, 2020 5:35 pm'de

   I noticed that this video/instructions are dated 2015 and the screenshots, etc. are different. When I tried to embed the Google Fonts code in my header.php file as shown, it threw an error. So I’m thinking maybe this tutorial needs to be updated? Not sure, but… Thanks.

   Yanıtla

   • WPBeginner Support says

     Tem 10, 2020 9:01 am'de

     Thank you for your feedback, we’ll be sure to take a look into updating this article when able.

     Yanıtla

     Yönetici

3. Wout says

   Kas 11, 2019 5:38 am'de

   Thanks for the article! Please replace http: in fonts.googleapis.com/css… with https: in the function to enqueue Google Fonts to enable an encrypted link to googleapis.com…

   Yanıtla

   • WPBeginner Support says

     Kas 11, 2019 10:08 am'de

     Thanks for pointing this out, we will be sure to update the links as soon as we are able

     Yanıtla

     Yönetici

4. Sofia says

   Ağu 19, 2017 5:18 am'de

   I’m pretty sure it’s 2017 why we even have to learn all this :”((

   Yanıtla

5. charles says

   Ağu 10, 2017 3:55 am'de

   Is this still the right way to do it?

   Yanıtla

6. Renee says

   Tem 19, 2016 3:41 pm'de

   I got the font to show up but can’t figure out how to get it bold.
   Here’s an example of what i did in the css

   font-family:”Open Sans”, sans-serif;
   font-weight:bold;

   in the link i added to my header.php i added this:

   i tried subbing 700 for bold but no luck…
   any ideas?

   thanks in advance

   Yanıtla

   • Isaac Anderson says

     Nis 13, 2017 11:16 pm'de

     Make sure you check your desired font-weights on Google fonts after selecting them in the “customize” tab.

     Yanıtla

7. Louis says

   Haz 17, 2016 1:37 pm'de

   Works perfect! Thx.

   Yanıtla

8. josh says

   Haz 13, 2016 2:28 am'de

   Huh? Wtf does any of this mean? How do I make it so that I can just add a google font in my post or page?

   Yanıtla

9. Shubham Kumar says

   Mar 28, 2016 8:05 am'de

   What do you think about importing Google web Fonts using JavaScript asynchronously as mentioned over here :

   Thanks
   Shubham

   Yanıtla

10. Jordan says

    Mar 22, 2016 8:20 pm'de

    One quick question – I looked up the code reference for wp_enqueue_style(). Its first argument is a string that denotes the name of the stylesheet. In your example, you use ‘wpb-google-fonts’ for the first argument. How can I tell what to put here for my site?

    Yanıtla

11. pete rome says

    Ara 25, 2015 11:04 pm'de

    where do I paste stuff in the header exactly? always see that but people never explain exactly where it is.

    Yanıtla

12. Carla DeLauder says

    Kas 1, 2015 10:49 pm'de

    What does ‘false’ do in this function? Other enqueued functions don’t include it.

    Thank you.

    Yanıtla

    • Kev says

      Ara 3, 2015 3:04 pm'de

      that’s the argument for header or footer. Since best practice is to put [almost] all scripts in the header it defaults to ‘true’ => footer, whereas ‘false’ would mean the NOT in the footer, but in the header instead.

      Unfortunately, font scripts stop everything else from loading, so putting them in the header sucks a litlte bit, which is why this article talks about making sure you’re only including the fonts you’ll actually use. On the flip side, putting them in the footer can cause default fonts like arial to load momentarily on your screen during painting until the webfont gets loaded. It’s a horrible caveat, but it is what it is.

      A practice I’m working into my workflow is to conditionally load fonts based on their usage in the site. For example, maybe “bold” is only used in h2’s and h3’s in blog post templates (single.php), then I’ll write a conditional enqueue for the bold script to only be enqueued when on single.php template.

      Hope that helps.

      Yanıtla

      • Kev says

        Ara 3, 2015 3:10 pm'de

        Also, to note.

        By “bold” above, I meant a specific bold version of a font family. <= just a head's up.

        Yanıtla

13. Kenneth John Odle says

    Tem 26, 2015 8:35 pm'de

    As of WordPress 3.3, wp_print_styles is deprecated.

    Yanıtla

    • Bram says

      Ağu 26, 2015 7:13 am'de

      Yeah, you should update this article.

      Yanıtla

      • WPBeginner Support says

        Eyl 6, 2015 1:44 pm'de

        Updated.

        Yanıtla

        Yönetici

    • WPBeginner Support says

      Eyl 4, 2015 8:51 pm'de

      We have updated the article, it now shows how to add Google fonts using the proper wp_enqueue_style function and wp_enqueue_scripts action hook.

      Yanıtla

      Yönetici

      • isak says

        Oca 6, 2016 9:25 pm'de

        How do you enque two font families via functions.php?

        Yanıtla

14. April says

    Tem 4, 2015 3:00 am'de

    I’m using the Punch Fonts plugin to add google fonts but I am not sure how to just get only heading 1 for the desired font. I don’t need this font for headings 2-6 so I only want to use the google font for heading one. How do I write that in the parameter?

    Currently I’m using: Oleo+Script+Swash+Caps:400

    Yanıtla

15. Melissa says

    May 11, 2015 10:25 pm'de

    Well, if anyone is stuck, there is also this plugin called Easy Google Fonts. Very helpful.

    Yanıtla

16. Melissa says

    May 11, 2015 3:34 pm'de

    Hello,

    I have tried all three methods but neither of them took effect completely. It seems that it only applies to certain elements and not to others that I specified with that font in the style sheet

    When I use the Element Inspector for the element where my Google Font is not applied, this is what I see:
    #site-title {
    font-family: \’Questrial\’, Helvetica, Arial, sans-serif;

    What do these mean \\ around my font? I mean, it looks like it is indicating an error but I can’t figure out what I am doing wrong? What could it be? Some code overriding mine, with higher priority? but where? how? Arghhhh it’s driving me nuts

    Yanıtla

17. Ali Sajjad says

    Mar 18, 2015 11:30 am'de

    Dear Editorial, i want to add all google web fonts in this site, and then want to use in my means,

    but i dont want to use too many links in header file. any other way?

    Yanıtla

    • WPBeginner Support says

      Mar 18, 2015 7:22 pm'de

      Only add the fonts that you want to use.

      Yanıtla

      Yönetici

18. Anurag says

    May 20, 2014 11:44 pm'de

    So, I have got a blog ( http://www.goingtechy.com/ ). The problem I am having is that I want to optimize css delivery of the Google font that my site uses already. So, the site already have Google fonts. How can I optimize it?

    Yanıtla

19. Samantha says

    May 8, 2014 1:52 pm'de

    Thank you so much for this post! For someone who has no formal html/css training, I was impressed with the simplicity of this post.

    Yanıtla

20. Tanisha says

    Mar 18, 2014 3:06 pm'de

    So easy and go it to work perfectly. Thanks for this.

    Yanıtla

21. Greg says

    Mar 13, 2014 11:36 am'de

    Hi there,

    Using Genesis and the Parallax Pro theme…
    But a newb to things like php etc

    I added this code to the fuctions.php file as you insctructed:
    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

    function wpb_add_google_fonts() {
    echo ”;
    }

    The headers that use the font above remain unchanged.

    Questions:
    1. Am I right in assuming that the code above is the only thing that I add?
    2. Where exactly should the code be added – at the beginning or end of fuctions.php?
    2. Is there anything missing from the code?
    3. Should I be adding something to the style.css file?

    Appreciate your help
    Regards
    Greg

    Yanıtla

    • WPBeginner Support says

      Mar 14, 2014 11:38 am'de

      Greg, seems alright to us. We think WordPress probably omitted the part from your code where you echoed font link. Yes you will need to use CSS to set style rules for selectors where you want to use your Google font.

      Yanıtla

      Yönetici

22. Tony Porto says

    Oca 10, 2014 7:18 pm'de

    None of the above is good enough, we all know “wp_enqueue_style( ‘google-font’)” is the “technically correct way to call a script, but in this case your <header will end up like this;

    FONT 1:
    FONT 2:
    FONT 3:
    FONT 4:

    No Good, it needs to be like this:
    

    Yanıtla

23. Akmal says

    Ara 21, 2013 11:54 am'de

    Where should i paste the above code? I could not find the last line of code anywhere in my header.php file? Can you please tell me step-wise?
    Thanks.

    Yanıtla

    • WPBeginner Support says

      Ara 21, 2013 2:22 pm'de

      In your header.php file you will find </head> you can paste this code any where before this tag.

      Yanıtla

      Yönetici

24. Sarah says

    Kas 25, 2013 8:18 pm'de

    Tried re-typing the following, and still nothing is changing;

    /* Import Fonts
    ———————————————————— */

    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

    function wpb_add_google_fonts () {
    echo ‘’;
    }

    /* Defaults

    It worked the first time. I’m so confused!
    Thanks for your help.

    Yanıtla

25. Sarah says

    Kas 21, 2013 6:26 pm'de

    Hi,

    I was so proud of myself for copying the code and changing the font which, I found too large for my site. When I tried to change it to something else, I must have mixed something up, and only one font style continues to show, even when I play about with the codes. Feeling like a dunce now – I don’t talk tech. Can anyone help me? I’ve done it with and without the numbers in case they’re not actually part of it. Thanks. This is the latest that I entered…..

    /* Import Fonts
    ———————————————————— */

    1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
    2
    3 function wpb_add_google_fonts() {
    4 echo ”;
    5 }

    /* Defaults
    ———————————————————— */

    Yanıtla

    • WPBeginner Support says

      Kas 22, 2013 10:51 am'de

      we hope you did not enter the numbers with the code Or did you?

      Yanıtla

      Yönetici

      • Sarah says

        Kas 22, 2013 11:50 pm'de

        No numbers, but I am missing something this time around. This is exactly what I have in my table;

        add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

        function wpb_add_google_fonts() {
        echo ”;
        }

        Yanıtla

      • Sarah says

        Kas 28, 2013 11:14 am'de

        It seems the code worked…..on one computer. It hasn’t taken on two others that I use.
        Can you please suggest why that might be the case?

        Thanks so much

        Yanıtla

26. Karissa Skirmont says

    Kas 10, 2013 2:37 pm'de

    How can you use multiple Google Fonts in the functions.php ?

    I had this:

    //* Enqueue Google fonts
    add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
    function executive_google_fonts() {
    	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
    	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
    }
    
    

    But the Dancing Script wasn’t showing up font on my second computer or iPhone or tablet.
    I removed the Open Sans and it started working.

    Yanıtla

    • WPBeginner Support says

      Kas 10, 2013 4:30 pm'de

      @Karissa, the first argument in wp_enqueue_style function is the handle for the style script you are loading. Try this code instead:

      //* Enqueue Google fonts
      add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
      function executive_google_fonts() {
      	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 );
      	wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 );
      }
      

      Hosted with ❤️ by WPCode

      
      1-click Use in WordPress

      Yanıtla

      Yönetici

      • Karissa Skirmont says

        Kas 10, 2013 5:03 pm'de

        Nevermind, I figured out that I needed to use a link like this:

        ‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’

        Yanıtla

      • Karissa Skirmont says

        Kas 10, 2013 5:33 pm'de

        Ahh I see, I replied above before refreshing the page and seeing your reply.

        By using the link Google gives when you have multiple fonts selected, it produces it like that and you can more easily try out different fonts live on site.

        Yanıtla

27. Chaitanya says

    Kas 6, 2013 11:41 pm'de

    Thank you so much!! Whenever I need any WordPress help, I come directly to wpbeginner as I know I would find a best solution here. You guys don’t know how much you have helped beginners like me, Appreciate you support
    Long Live WPBeginner…

    Cheers,
    Chaitanya

    Yanıtla

28. Jenny says

    Eki 6, 2013 2:55 pm'de

    Meh, I like using the import. Less work for me ’cause I’m lazy~

    Yanıtla

    • pete rome says

      Ara 25, 2015 11:06 pm'de

      yeah way too much work on each method here and there shouldn’t be a need to add anything to the style sheet find a plugin

      Yanıtla

29. Jimmy Reynolds says

    Eyl 5, 2013 11:05 am'de

    A you mean the nerd way

    Yanıtla

30. mzilverberg says

    May 25, 2013 11:36 am'de

    Something I missed here were the conditional comments to make Google’s webfonts work in IE8 and below if you request more than one font weight. For example:

    <link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />

    That’s why I created a function for loading fonts: https://github.com/mzilverberg/LoadGoogleWebfonts

    My script also places the appropriate fallback urls within a conditional comment.
    With a few lines of code you could also make this work in functions.php in your WordPress theme.

    Yanıtla

31. Greg says

    Nis 30, 2013 3:07 pm'de

    What about adding Google Fonts to the admin side?

    Yanıtla

    • Editorial Staff says

      May 9, 2013 11:06 am'de

      Why would you want to add Google Fonts to the admin side?

      Yanıtla

      Yönetici

      • Bruce Smith says

        May 23, 2013 6:09 pm'de

        To maintain WYSIWYG in the admin content editor. So that I see the same font face in the admin editor as on my web site.

        Yanıtla

        • Dan Merhar says

          May 30, 2013 3:31 pm'de

          I was actually wondering how to do the same thing (and this is the first result that popped up on Google).

          I know plug-ins exist to add Google Webfonts functionality to the WYSIWYG editor, but they bog it down like crazy. I’m going to look into it further and see if there’s an easy way to add a font or two.

32. Marleen says

    Ara 30, 2012 7:16 am'de

    Thanx a lot for sharing, I’m really happy with this. I’m a Genesis user and started using @import because it’s alraedy being done in the stylesheet. Feel much better about this solution.
    Happy 2013!

    Yanıtla

33. jeff says

    Ara 6, 2012 4:29 pm'de

    In your code do I replace “YOUR THEME STYLESHEET” with something??
    mine is STYLE.CSS, or does it need to be a URL ??
    thanks,
    Jeff

    Yanıtla

    • Editorial Staff says

      Ara 6, 2012 8:20 pm'de

      Yes, you need to insert your theme’s style.css path there.

      Yanıtla

      Yönetici

34. Charles says

    Eki 16, 2012 10:06 pm'de

    This is what I use…..

    Add this to your theme’s functions.php file:

    /*----------------------------------*/
    /* Load CSS Files
    /*----------------------------------*/	
    	if(!function_exists('load_theme_styles'))
    	{
    		function load_theme_styles()
    		{		
    			if (!is_admin()) {
    				
    				$cssURL = get_template_directory_uri().'/css/';
    				$fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald';
    				
    				// Registering New Styles	
    				wp_register_style('googleFont', $fontURL);					
    				wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen');
    				wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print');
    				
    				// Enqueing Styles
    				wp_enqueue_style('googleFont');	
    				wp_enqueue_style('style');
    				wp_enqueue_style('print');			
    				
    			}
    		}
    	}
    	add_action('wp_enqueue_style', 'load_theme_styles');
    

    What do you think about this?

    Yanıtla

    • Chris Reynolds says

      Tem 20, 2013 8:46 am'de

      This is the CORRECT way to add Google fonts. Always use wp_register_style/wp_enqueue_style

      Yanıtla

35. David says

    Eki 10, 2012 7:44 pm'de

    Better still add a conditional comment to serve the fonts separately for IE 7 and 8:

    From here:
    http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/

    Yanıtla

36. Bryan Nickson says

    Eyl 12, 2012 12:16 pm'de

    Nice tuts. I had wanted something like this..Kudos!!

    Yanıtla

37. Peter says

    Ağu 11, 2012 3:25 am'de

    What about the JS option, is that a faster option Or the one is the better?. Thanks

    Yanıtla

    • Editorial Staff says

      Ağu 11, 2012 7:11 am'de

      The method in this one is by far the most recommended one.

      Yanıtla

      Yönetici

      • QLStudio says

        Eki 19, 2012 2:38 pm'de

        In your answer you don’t enqueue the css – is that really the best way to add it?

        Yanıtla

38. Chris says

    Tem 23, 2012 4:18 pm'de

    Great article! I think it would be pretty cool if wordpress, by default, had Google Fonts included into it, but this seems easy enough. Thanks for explaining!

    Yanıtla

    • Editorial Staff says

      Tem 24, 2012 8:37 am'de

      Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though

      Yanıtla

      Yönetici

39. Aaron Crow says

    Tem 20, 2012 8:22 pm'de

    You rock man! Just what I was looking for! Thanks for putting up this post… I searched forever trying to find something about adding this to my theme. Glad I stumbled across your page.

    Yanıtla

40. Anderson Curry says

    Haz 29, 2012 1:33 pm'de

    Great post and even if their is a plug-in to do this, it’s always better to learn the non – plugin way also.

    Yanıtla

41. Brad says

    Haz 27, 2012 10:51 am'de

    So obviously you dont accept using the several Google font plugins. I am going to have to revisit my css files in that case.

    Yanıtla

42. sadhu says

    Haz 27, 2012 10:40 am'de

    i dont understand the second part which is adding font to the genesis add action thing.. is that another method to add in google web font?

    and i know we dont have to incld all styles of the font, but the recommended method, which is http://fonts.googleapis.com/css?family=Lora|Oswald

    just for instance, what if i only want bold style for lora and light style for oswald, then how to combine the font styles?

    thanks

    Yanıtla

    • Editorial Staff says

      Haz 27, 2012 11:04 am'de

      The second part is for Genesis Users ONLY. If you are not using the Genesis Theme Framework, then you don’t need that part. To combine styles like you want, here is how you do it:

      http://fonts.googleapis.com/css?family=Oswald:300|Lora:700

      Yanıtla

      Yönetici

      • Anton says

        Mar 7, 2013 5:29 pm'de

        What should I do if I want to use @font-face in Genesis Framework like you showed here with the Google Webfonts, are there any solution for that.
        I’ve been searching all day since my fonts loads incredibly slow!
        Cheers

        Yanıtla

43. Gautam Doddamani says

    Haz 27, 2012 10:24 am'de

    great tutorial…i actually use the wp google fonts plugin…would you recommend that plugin or doing the manual way as described above..which is efficient performance wise?

    Yanıtla

    • Editorial Staff says

      Haz 27, 2012 11:00 am'de

      Haven’t tried that plugin. But we almost try to avoid plugins of that sort because it can be done easier with theme files.

      Yanıtla

      Yönetici

      • Gautam Doddamani says

        Haz 28, 2012 12:51 am'de

        sweet…thanks will edit my theme instead of using a plugin

        Yanıtla

        • Pippin says

          Eki 20, 2012 6:16 pm'de

          Avoiding the google fonts plugin because it is a plugin is not a good reason at all. Using the plugin actually provides you with much more flexibility than including it in your theme, especially if you ever choose to change themes.

        • Editorial Staff says

          Eki 21, 2012 8:40 am'de

          As far as I’m concerned, fonts in most cases are considered stylistic elements thus theme based, and they usually change when you switch to a different theme.

44. Siddanth Adiga says

    Haz 27, 2012 8:38 am'de

    Superb post I was looking for this only i was trying my hands with css and fontface .I ll try this one too thanks

    Yanıtla

45. Konstantin Kovshenin says

    Haz 27, 2012 5:49 am'de

    The “Right” way would be to use the wp_enqueue_style function Here’s some more thoughts: http://kovshenin.com/2012/on-wordpress-theme-frameworks/

    Yanıtla

    • Editorial Staff says

      Haz 27, 2012 6:36 am'de

      Konstantin, I totally agree with you. wp_enqueue_style function should always be used. That is what I tried doing first as suggested by Nathan Rice, in StudioPress’s article about Google Fonts. Except Google clearly states, that the font styles should be loaded before anything else. Using wp_enqueue_style and then printing them using wp_print_styles, this was printing the item after the main stylesheet was already loaded. That was the reason why I had to hook into genesis_meta() hook. Anyways, totally agree with your thoughts on your article.

      Yanıtla

      Yönetici

      • Japh says

        Eyl 24, 2012 5:05 am'de

        I’m a little late to this, but I wanted to mention that you could still use wp_enqueue_style, just set the priority higher so that they are loaded first

        Yanıtla

    • Bob R says

      Haz 27, 2012 9:01 am'de

      Great tutorial. One observation though: first image in the article was meant to show the @import tab, wasn’t it?

      Yanıtla

      • Editorial Staff says

        Haz 27, 2012 10:58 am'de

        No it wasn’t suppose to show that.

        Yanıtla

        Yönetici