- This topic has 12 replies, 2 voices, and was last updated 6 years ago by Tom.
-
AuthorPosts
-
March 7, 2018 at 7:53 am #513994dgainesj
Hi,
I added a custom font to my site, the Harrison font, and when I change to it in the customizer, the font is just normal, it looks like times new roman, maybe?
This is what I did:
Uploaded the zip file to the file manager.
Added the filter code to the code snippets plugin.
Added the font-face code to the simple css section.The harrison font shows up in the customizer, it just doesn’t show up on the web page. Could it be an issue with the files itself, or is this my own user error, or something else… ?
What are my steps for figuring this out?
Thanks very much!
All the best,
DinaMarch 7, 2018 at 8:03 am #514000dgainesjI also tried it inline, style=”font-family: harrison;” and it also didn’t make it be harrison.
This is the code I put in snippets:
add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );
function tu_add_system_fonts( $fonts ) {
$fonts[] = ‘harrison’;
return $fonts;
}This is the code I put in simple css:
@font-face {
font-family: ‘harrison’;
src:url(‘harrison.ttf.woff’) format(‘woff’),
url(‘harrison.ttf.svg#harrison’) format(‘svg’),
url(‘harrison.ttf.eot’),
url(‘harrison.ttf.eot?#iefix’) format(’embedded-opentype’);
font-weight: normal;
font-style: normal;
}This is my site: dinagaines.com.
If you notice, the site name, main headline, and Hi, I’m Dina are all not Harrison. Those are the ones I tried to change to Harrison.
Thanks for any help, all the best,
DinaMarch 7, 2018 at 10:33 am #514108TomLead DeveloperLead DeveloperUploading the .zip won’t work – you need to upload the individual font files.
Check out this block you added:
@font-face { font-family: 'harrison'; src:url('harrison.ttf.woff') format('woff'), url('harrison.ttf.svg#harrison') format('svg'), url('harrison.ttf.eot'), url('harrison.ttf.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; }
Notice those font file? Those need to point to the actual files.
So if you upload the files to your child theme in a fonts folder, you would do this:
@font-face { font-family: 'harrison'; src:url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.woff') format('woff'), url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.svg#harrison') format('svg'), url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.eot'), url('https://yoururl.com/wp-content/themes/generatepress_child/fonts/harrison.ttf.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; }
Then everything should work π
March 8, 2018 at 2:52 am #514500dgainesjHi,
Thanks very much for your reply. I chatted with the hosting people, and they said uploading the files individually may cause problems with my site, that I should leave it as a zip file. This is the file path:
/home1/jewishpo/public_html/dinagaines/wp-content/themes/freelancer/webfonts_harrison.zip
So, in the font-face code, I don’t have the four different formats. they all have the same path. Do I need to adjust the code in some way? Or do I replace this (‘harrison.ttf.woff’) and all the other ones, with this (‘/home1/jewishpo/public_html/dinagaines/wp-content/themes/freelancer/webfonts_harrison.zip’)?
And in the code snippets, do I still put ‘harrison’ or do I put ‘webfonts_harrison’?
Thanks for your help!
All the best,
DinaMarch 8, 2018 at 10:26 am #514950TomLead DeveloperLead DeveloperHi Dina,
Not sure what they’re talking about – your entire WordPress site is run off of individual files.
Using custom fonts requires the font files to be unpacked – it won’t work while they’re zipped up.
Who’s your hosting?
March 8, 2018 at 9:28 pm #515289dgainesjBluehost.
If I upload them and then see I have issues, would deleting them remove the issue?
I really do want to figure this out and not give up. I may want to use custom fonts again in future.
Is this a generatepress thing or a hosting thing? I don’t want to take advantage of your time yet this issue is still here.
??
Thanks,
DinaMarch 9, 2018 at 9:31 am #515759TomLead DeveloperLead DeveloperYou won’t have any issues, but you can always delete files that you’ve uploaded.
I would ignore their advice (it’s likely just a confused agent), and upload the individual files to your server.
Then point to them in your
@font-face
code, and you’ll be good to go πMarch 10, 2018 at 10:38 am #516561dgainesjHi,
Thanks so much Tom. Sorry this is dragging on.
I put in the individual font files into a newly-created fonts folder. My site did not break (yay).
I put the filter code in snippets.
I put the new font-face code in simple css.It is still not showing up.
This is the file path I used, could it possibly be this?
The bluehost account has a bunch of domains, dinagaines.com is not the main one, not the original one for this hosting account. Could that be the issue?
The very top of my file accordion says: home1/jewishpo
Do I write
instead of
https://dinagaines.com/home1/jewishpo…
or something else… ?
I tried it both ways, and still nothing changed.
I feel like I am missing something basic but don’t even know what that may be. Something like forgetting to turn on the monitor and wondering why it’s all dark.
I appreciate your patience and help with this.
All the best,
DinaMarch 10, 2018 at 10:02 pm #516754TomLead DeveloperLead DeveloperHi Dina,
It should be this:
https://www.dinagaines.com/wp-content/themes/freelancer/fonts/harrison.ttf.woff
You should be able to pop that into your browser and it should download the font.
If it returns a 404 error, it means the URL is wrong.
Hope this helps π
March 11, 2018 at 2:13 am #516836dgainesjHi Tom,
It doesn’t get an error, it just goes back to the page I was on, as if nothing happened.
The files are not in “dinagaines.com” they are in “dinagaines.” The folder dinagaines.com is empty. All the files are in dinagaines. I asked them over at blue host and they said it is normal that everything in dinagaines, not dinagaines.com.
When I put it in the browser without the “.com” of course it goes nowhere.
Thanks,
DinaMarch 11, 2018 at 8:53 am #517058TomLead DeveloperLead DeveloperIt’s not so much about the folder as it is about the website URL.
If you pop in the URL I provided above, you’ll see it downloads the file.
March 12, 2018 at 11:56 pm #518407dgainesjOh my goodness YAY! It totally worked.
Thank you so much for your help and for sticking with me this long. I appreciate it so much!
All the best,
DinaMarch 13, 2018 at 8:44 am #518935TomLead DeveloperLead DeveloperYou’re welcome! π
-
AuthorPosts
- You must be logged in to reply to this topic.