-
Hello,
I just launched thespaceidaho.org. The local font I am trying to load is “lie to me”. I followed directions, read a ton of other posts that had similar issues, and simply cannot figure this one out!
Here is what I currently have in my Additional CSS
@font-face {
font-family: “Lie to Me”;
src: url(“http://thespaceid.flywheelsites.com/wp-content/uploads/2023/02/Lie-to-Me.woff2”) format(“woff2”),
url(“http://thespaceid.flywheelsites.com/wp-content/uploads/2023/02/Lie-to-Me.woff”) format(“woff”),
url(“http://thespaceid.flywheelsites.com/wp-content/uploads/2023/02/Lie-to-Me.ttf”) format(“truetype”);
font-weight: normal;
font-style: normal;
}Please help me figure this one out!
Jess -
Hi Jess,
Your site link can not be reached at this moment, can you check?
You can check if the font file is supported by browser, for example, this is for .ttf file:https://caniuse.com/?search=ttf
As your code didn’t wrap in the code tags, the format has changed, thus I can’t tell if the code is correct or not.
-
I had just did some DNS work, I’m sure that is why you couldn’t get to the site. Sorry about that.
Please try again.
It looks like tff is pretty much universally accepted. Safari iOS 3.2-4.1 was red. Sadly my iOS is up to date, so I don’t think that is it.
Thank you for looking.
-
Fernando
Hi Jess,
I tried accessing the site but I can’t access it as well right now. Can you re-check its accessibility?
-
Oh My goodness. We set up a transfer of the domain and I expected it to take a few days to initiate but they sent it over within hours! Faster transfer I’ve experienced. I just checked the DNS and it has fully populated as of this morning. Please forgive me and try one more time (*facepalm*)
-
Hi there,
1. In your Customizer > Addtional CSS you have:
/* fonts */ add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'bd-supper, sans-serif'; return $fonts; } );
Can you remove that, as the code is PHP and will possibly break any CSS after it.
2. in your @font-face you the src URL 404s, if i check in your Media Libary i see a zip folder with the font name, the fonts can’t be in a zip they need to be individually uploaded.
Can you make those changes first ?
-
Thanks for hanging in there with me. I added the PHP code in the Code Snippets
add_filter( ‘upload_mimes’, function( $mimes ) {
$mimes[‘woff’] = ‘application/x-font-woff’;
$mimes[‘woff2’] = ‘application/x-font-woff2’;
$mimes[‘ttf’] = ‘application/x-font-ttf’;
$mimes[‘svg’] = ‘image/svg+xml’;
$mimes[‘eot’] = ‘application/vnd.ms-fontobject’;return $mimes;
} );Add then tried to load the individual font files but I get an error. It does allow me to load the zip files, which is why I thought it was the right way.
I tried connecting to my FTP client today and it is not cooperating. I think I am having one of those tech days! Any advice?
-
Will it allow you to upload just the
woff
andwoff2
files ? -
I don’t have woff versions, I thought I did, but the font only comes with the ttf version. π
-
Update I was able to find woff and woff2 versions online! I’ll try them now.
-
OK let us know π
-
ok I have loaded them into the media file FTP but they are not showing up in the media file.
I was also able to find the woff and woff2 version of the font. So all three (tff, woff, woff2) are loaded in the media file.The fonts are not showing on all browsers with these changes. π
-
Check the Step 3: Register your uploaded files to your WordPress media library in the below article:
https://jetpack.com/blog/how-to-bulk-upload-files-to-wordpress-via-ftp/
-
Thank you Ying, I added the plugin and put the files into my media file. I adjusted my css to this:
@font-face {
font-family: “Lie to Me”;
font-weight: normal;
font-style: normal;
src: url(“http://thespaceid.flywheelsites.com/wp-content/uploads/2023/02/”) format(“woff2”),
url(“http://thespaceid.flywheelsites.com/wp-content/uploads/2023/02/”) format(“woff”),
url(“http://thespaceid.flywheelsites.com/wp-content/uploads/2023/02/”) format(“truetype”);And it is still not working. I really appreciate ALL the help on this.
-
ok… super weird. The copy past of the code above includes: $#8221; but that is most definitely not in my customizer. Perhaps there is a space there.
-
Don’t worry about the
$#8221;
its just WordPress escaping some HTML in this forum.The URLs are wrong though.
eg.
http://thespaceid.flywheelsites.com/wp-content/uploads/2023/02/
two issues:
the
http
needs to behttps
and there is no filename un the URL. It should have the font-name.woff or whatever the file is
- You must be logged in to reply to this topic.