How do I place a reference to a file in the head section of my website?

Community Forums Forums Design Tips and Tricks How do I place a reference to a file in the head section of my website?

This topic is: not resolved

Tagged: 

This topic contains 6 replies, has 4 voices, and was last updated by  laura 1 year, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #34910

    laura
    Participant
    Post count: 69

    Hi

    I purchased a font through myfonts.com, and I want to use it for my headers.

    The font installation guide tells me to

    “place a reference to the fonts’ css file in the head section of your website’s HTML code. Make sure that the reference appears on all HTML pages of your site.”

    Could someone please tell me in which file I should add this reference?   My child theme has a functions.php and a style.css, but no header.php.

    I can see a header.php in the Genesis Framework, but I understood we shouldn’t change these files?

    Thank you

    #34913

    joycegrace
    Participant
    Post count: 57

    Under theme settings, at the bottom there is a place to enter header and footer scripts.

    Or you can install Genesis Simple Hooks and add things to the head using that, it’s very simple.

    But if these are font files you probably want to create an @font-embed using something like fontsquirrel.com to convert all the files for use on Web browsers first. When you create that package, in the download, there are very clear instructions on how to get it set up in your CSS file.


    Find me at Joyce Grace (http://www.joycegrace.ca) and Clicks Online Marketing (clicksonlinemarketing.com).

    #34918

    TWF
    Participant
    Post count: 18
    #35122

    laura
    Participant
    Post count: 69

    @joygrace @TWF

    Thank you for your help.

    I added the code to the header section, using both suggestions (header scripts in theme settings / simple hooks plugin).  In both instances the font loaded correctly for the home page only.

    So the titles were in the new font on the home page.  But on all other pages, the titles reverted to the default (arial).

    The fonts have already been converted to web use, and the MyFontsWebFontsKit.css is doing @fontface calls.  The instructions in the webfont package tell me to add

    <link rel=”stylesheet” type=”text/css” href=”www.momgoesonline.com/fonts/MyFontsWebfontsKit.css”>

    to the head section of  my website page, making sure it is added to all pages.

    I just have no idea how to do that, and the header scripts in the settings page and the simple hooks only seem to work for the home page?

    Through Firebug I can see that I have added the fonts to the correct title tags on all pages, but that the new font (PRoxima Nova) is not being picked up, and that the titles revert to the default Arial.  (The website is Mom Goes Online)

    Can anyone tell me how to add the code to the head section of all pages?  Do I need to add a call in functions.php?

     

     

    #35134

    TWF
    Participant
    Post count: 18

    Hello, your <h1><h2> and sidebar titles , are in ProximaNova-Bold,arial,sans-serif , on home, post, category.

    To insert the code, I was thinking more in  genesis -> Theme settings -> Header and Footer Scripts.(header)

    Sorry for my english ;-)


    #35137

    braddalton
    Participant
    Post count: 9432

    I think you should simply use the download kit which Joyce suggested and upload the files to your child theme.

    You can add the CSS to your child themes style.css file or upload the entire folder to your child themes root directory.

    If you want to add a custom function:
    [php]
    add_action(‘wp_head’, ‘ref_custom_fonts’, 5 );
    function ref_custom_fonts(){
    echo ‘<link rel=”stylesheet” type=”text/css” href=”www.momgoesonline.com/fonts/MyFontsWebfontsKit.css”>’;
    }
    [/php]
    This outputs in the source on all pages. Same as if you added it to Simple hooks wrapped in php tags without the hook.

    You can change the hook to [php]genesis_meta[/php] or any other header hooks.

    Or you can also install a plugin http://wordpress.org/extend/plugins/font-uploader/

    Help Installing Fonts http://www.fontsquirrel.com/help


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #35153

    laura
    Participant
    Post count: 69

    @TWF and @braddalton

    Thx for your help!

    @braddalton – I tried what you said (You can add the CSS to your child themes style.css )

    So I added

    @import url(“http://momgoesonline.com/fonts/MyFontsWebfontsKit.css”);

    in the style.css file and that worked! woo hoo!

    So unless I get told this is a bad way of doing it, I am inclined to leave it?

    Cheers!

     

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.