Community Forums › Forums › Archived Forums › Design Tips and Tricks › How do I place a reference to a file in the head section of my website?
Tagged: Google font
- This topic has 6 replies, 4 voices, and was last updated 10 years, 11 months ago by laura.
-
AuthorPosts
-
April 11, 2013 at 9:30 pm #34910lauraMember
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
April 11, 2013 at 9:56 pm #34913joycegraceParticipantUnder 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)
April 11, 2013 at 10:05 pm #34918TWFMemberHello, you can put the script to header/footer scripts
April 12, 2013 at 7:19 pm #35122lauraMember@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?
April 12, 2013 at 8:15 pm #35134TWFMemberHello, 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 😉
April 12, 2013 at 8:22 pm #35137Brad DaltonParticipantI 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:
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”>'; }
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
genesis_meta
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
April 12, 2013 at 9:00 pm #35153lauraMember@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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.