- This topic has 13 replies, 6 voices, and was last updated 9 years, 8 months ago by
.
-
Posts
-
Hello,
I have uploaded a custom font and all supporting files, per the instructions given with the font. I am to place the following copy before the </head> and everything I have tried, including putting it in the Genesis theme settings under the header and footer scripts (hook) and it doesn't work. Please help. I am so frustrated. Thank you!!
_______________________________________________
Include a reference to the Kit. Locate the CSS file in the Kit’s main folder. You should place a reference to this file in the head section of your website’s HTML code. Make sure that the reference appears on all HTML pages of your site.
This will link the webfonts from the Kit to your website. If you uploaded the Kit to the root folder of your site, then you can just copy and paste the code below into your site's head. If you uploaded the Kit to a subfolder, you’ll need to adjust the path to the font files in the CSS file.
<!--
/**
* @license
* MyFonts Webfont Build ID 2912243, 2014-10-29T23:12:22-0400
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: ConsulTypewriterPro-Mix by (v) design
* URL: http://www.myfonts.com/fonts/v-design/consul-typewriter-pro/mix/
* Copyright: © 2012 by (v) design - Vit Smejkal. All rights reserved.
* Licensed pageviews: 10,000
*
*
* License: http://www.myfonts.com/viewlicense?type=web&buildid=2912243
*
* © 2014 MyFonts Inc
*/-->
http://www.barrettandcophotography.com
<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">Those instructions will work for a standard website. They might work with a WordPress site, but for a WordPress site those instructions are not entirely correct. Style sheets need to be enqueued in functions.php to be used properly in WordPress. Every theme is a little different, but generally you could take a look in your functions.php file for where other fonts or style sheets are being enqueued and follow suit with the new style sheet.
Also, the HTML comment tag at the beginning of your block of code. It should be <!-- not <!-. There are supposed to be two dashes.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?Hello,
Here is a good article that walks you through how to add custom fonts to your theme. The basic steps are:
1) Upload the font files to a fonts folder in your child theme.
2) Add the @font-face to the style.css file ( or custom stylesheet ). If you are using a separate stylesheet, you will need to enqueue that file using wp_enqueue_style (which goes in the functions.php file or plugin file).
3) Last, every place where you want to use your new font, you need to add (or modify) CSS to reference the font. You do this using font-family.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampFirst, thank you to everyone who responded.
Tonya, that article is wonderful thank you.
Unfortunately, it's still not working. I found the code below in the web kit CSS file so I pasted at the top of the style.css file as instructed (changing the URL to where the fonts are loaded). The only place I"m able to test it right now is on my Android phone and Firefox and it's not showing up. The widget headers along the bottom should be the same font as the header/logo (logo is an image). It's working on my laptop because of course I have the font loaded on my computer so I know I have put the font in the right places it's just not working on the Internet. Rrr...
I also used the CSS code in the article and that didn't work either.
I feel as if I've tried everything. What am I doing wrong?
_________________
/* @import must be at top of file, otherwise CSS will not work */
@import url("//public_html/barrettandcophotography/wp-content/themes/lovely/fonts/2c6ff3");@font-face {font-family: 'ConsulTypewriterPro-Mix';src: url('public_html/barrettandcophotography/wp-content/themes/lovely/fonts/2C6FF3_0_0.eot');src: url('public_html/barrettandcophotography/wp-content/themes/lovely/fonts/2C6FF3_0_0.eot?#iefix') format('embedded-opentype'),url('public_html/barrettandcophotography/wp-content/themes/lovely/fonts/2C6FF3_0_0.woff2') format('woff2'),url('public_html/barrettandcophotography/wp-content/themes/lovely/fonts/2C6FF3_0_0.woff') format('woff'),url('public_html/barrettandcophotography/wp-content/themes/lovely/fonts/2C6FF3_0_0.ttf') format('truetype');}
Ok, I've tried caching and my web host doesn't cache....I also added a .htaccess file as instructed here (because I'm using Firefox on my laptop and it's not showing up where it is on Safari). http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/.
I know this is operator error but I just cannot figure it out.
I wanted to note how this issue was resolved should someone else encounter the same problem.
I tried everything suggested and did my own online research. There appears to be many methods however it still wasn't working. I had someone look at it, who tested it and found that there was a server error in the font folder under the CHILD theme. He figured we didn't have permissions. He moved the font folder under THEMES (not even under the Genesis Framework just THEMES) and wrote the URL in full (http://www.......com) in the @font-face URL and it worked.
A lot of these articles state to put the font folder in the CHILD theme folder but it didn't work for me. Could be because the designer of the theme didn't want to give permissions, I'm not sure. So if it's not working for you, try the THEMES folder.
Again, thank you to everyone who responded.
@Kate, I am having the exact same problem. And it appears that we are using the same child theme (lovely).
I have moved the fonts under the main theme file (not the child theme) and it still doesn't seem to be working for me.
This is what I have (generated from Font Squirrel):
@font-face {
font-family: 'pacificoregular';
src: url('http://www.heidisweymouth.com/public_html/wp-content/themes/fonts/Pacifico-webfont.eot');
src: url('http://www.heidisweymouth.com/public_html/wp-content/themes/fonts/Pacifico-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.heidisweymouth.com/public_html/wp-content/themes/fonts/Pacifico-webfont.woff2') format('woff2'), url('http://www.heidisweymouth.com/public_html/wp-content/themes/lovely/fonts/Pacifico-webfont.woff') format('woff'), url('http://www.heidisweymouth.com/public_html/wp-content/themes/fonts/Pacifico-webfont.ttf') format('truetype'), url('http://www.heidisweymouth.com/public_html/wp-content/themes/fonts/Pacifico-webfont.svg#pacificoregular') format("svg");
font-weight: normal;
font-style: normal;
}Any thoughts??
Many, many thanks!
Donna
Donna, thank you for reaching out. I hope I can help.
This might be a silly question but did you change the font within the CSS?
Ok, just wanted to make sure. Sometimes it's the simple things and I would inevitably have a "duh" moment. 🙂
I compared my code with yours and this is what I found:
url(‘http://www.heidisweymouth.com/public_html/wp-content/themes/lovely/fonts/Pacifico-webfont.woff’) format(‘woff’)
In the URL above, I see in the path that it's pointing to the fonts folder under the 'lovely' theme where the other src URLs are not.
url(‘http://www.heidisweymouth.com/public_html/wp-content/themes/fonts/Pacifico-webfont.svg#pacificoregular’) format(“svg”)
In this URL, there is a 'svg' file and I'm not sure why. I'm not sure why you'd point a graphic file for a font? (I'm not an expert, unfortunately). I didn't point a .svg file in my font coding. There is also double quotations around "svg" versus single quotations 'svg'
*crossing fingers* that this helps.
Distribute this font files with a fonts folder inside your baby style. Put this @font-face for the fashion. css document ( or maybe custom made stylesheet ). If you are using another stylesheet, you will have to enqueue in which document employing wp_enqueue_style which in turn gets into this characteristics. php document or maybe plugin document. They could start using a WordPress website, but for a new WordPress website those instructions usually are not solely proper. Style blankets ought to be enqueued with characteristics. php to get utilized appropriately with WordPress.
_________________________________
NoorAlamShahzad
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.