Unable to remove a local font from wp install (5.9.3)

  • Apologies if I didn’t post in the right place. I’m a new forum member and somewhat new to WordPress.

    I’m attempting to add my own custom made font to my staging website with a “Full site Editing” theme
    version: 5.9.3
    Theme: Wabi

    I used the file manager from my host to add a .ttf file into the fonts folder of the theme and then used aditional CCS on the wp-admin/customize.php page to call the font file and have it be used for H1

    @font-face { 
font-family: Geometer; 
src: url(https://james-debono.com/stage/wp-content/fonts/geometer); 
}

H1 { 
font-size: 32px;
font-weight: bold; 
font-family: geometer;
}

    I then realized that the .ttf font wasn’t working in firefox so I tried to remove all traces of the file, clear the trash and the cache to get rid of it so I could use a .woff2 instead. I notice though that despite removing it, the CCS still loads the font somehow though I don’t know how it is loading it and from where?

    How do I remove it?

    And how should I better add a custom font if not through CCS

    • This topic was modified 2 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Moved to Fixing WordPress, this is not an Everything else WordPress topic.

    Please ask theme specific questions in that theme’s dedicated sub-forum instead.

    https://www.ads-software.com/support/theme/wabi/

    Thread Starter jamesdb

    (@jamesdb)

    I didn’t think this was theme specific is it? I thought it was related more to the file structure of wordpress and how it references font files

    It looks like this code is being loaded in your site’s <head> area from where you added it via the customizer:

    
H1 { 
font-size: 32px;
font-weight: bold; 
font-family: geometer;
}

    You should be able to go to yoursite/wp-admin/customize.php. Then, remove the font-family line of code from the “Additional CSS” section. Then, save.

    Font files do not need to be stored on the server to be in use. They will actually load from your computer if they exist. If you have already removed the font file from the site, it may simply be that it’s being loaded from your computer.

    For example, when I load up your site, I’m just seeing the default serif font for the h1 because I don’t have the geometer font on my computer.

    Thread Starter jamesdb

    (@jamesdb)

    Ahhh okay I did not realize that it could be pulling the font from my pc! that makes a lot of sense and I think that’s why I was so confused because I removed everything from the CCS and just added back the 

    H1 { 
font-size: 32px;
font-weight: bold; 
font-family: geometer;
}

    and was thinking where is it referencing the font from if I removed it?

    Okay I uninstalled the font from my PC and it’s gone now. Thanks for your help!

    Do you have any suggestions on how to add the font in a better way? like editing the theme.json so that it appears in the dropdown list in the theme customizer section?

    When WordPress 6.0 is released, you should be able to load font files via theme.json. Here is example of how that works: https://github.com/WordPress/gutenberg/issues/39654#issuecomment-1110829094 (this is also possible if you have the latest Gutenberg plugin installed with WordPress 5.9.x).

    In the above case, it would not appear in the customizer, but in the Appearance > Editor screen via the “global styles” panel. It would also be available as an option for blocks that support custom font selections.

    For WordPress 5.9.x, loading a font file via CSS’s @font-face (your current method) is the best option.

    Thread Starter jamesdb

    (@jamesdb)

    Thanks for the info!

    Do you think it would be worth it for me to get on the 6.0 beta so I can do it that way to kind of future proof rather than using a work around in the mean time?

    6.0 Release Candidate 3 was released today. You can find instructions for testing it here: https://www.ads-software.com/news/2022/05/wordpress-6-0-release-candidate-3-rc3-now-available-for-testing/

    To answer your question, it all depends on your comfort level. For example, I personally run the latest dev version on live sites, but I feel comfortable fixing or rolling back if something breaks. I generally recommend testing on a staging or test environment first for betas/RCs.

    WordPress 6.0 is planned for release on May 24, so now is definitely a good time to try out some of the new stuff like web fonts. It would definitely help for future proofing.

    Here’s the most recent notes related to web fonts via theme.json: https://make.www.ads-software.com/core/2022/05/03/global-styles-variations-in-wordpress-6-0/

    Thread Starter jamesdb

    (@jamesdb)

    Perfect thanks! I will definitely use my staging site but my live site only has a working theme without any content so I don’t have much to lose anyway

    Cool, I guess I will have to do a bit of reading to figure it out. The Wabi theme looks a bit different to the examples

    "typography": {
			"dropCap": false,
			"fontFamilies": [
				{
					"fontFamily": "\"Inter\", sans-serif",
					"name": "Inter",
					"slug": "body"

    This “dropCap” part before the definition of the font family threw me off a bit but I’m pretty vanilla so I’m just trying to put the pieces together

    Yeah, each theme.json might look a little different. Essentially, it’s just a configuration file. Once you kind of get the hang of it and figure out how the pieces fit together, it’s not too bad.

    Don’t hesitate to continue posting here if you get stuck with anything.

    Thread Starter jamesdb

    (@jamesdb)

    Thanks a lot for the offer! and for all your help so far.

    So I’m wondering, firstly, if install 6.0 now (I guess the beta), then when the official release comes out, will it be simple to update to the official 6.0?

    Or will I be in a beta pipeline and have to get back out onto the official pipeline?

    Updating should not be an issue. If you’re running a 6.0-beta-x or 6.0-rc-x version, those are considered “earlier” versions than 6.0.0, so WordPress will prompt you to update to 6.0.0 when it is released.

    Also, I always recommend performing a backup just in case anything goes wrong. It never hurts to play it safe.

    There’s also more of an official beta tester plugin here: https://www.ads-software.com/plugins/wordpress-beta-tester/

    I have honestly never used it and don’t really know how it works.

    Thread Starter jamesdb

    (@jamesdb)

    Where do I go to install the 6.0 beta the normal way?

    The latest 6.0 Release Candidate is available here: https://www.ads-software.com/news/2022/05/wordpress-6-0-release-candidate-3-rc3-now-available-for-testing/

    By “normal” way, I’m assuming you’re referring to install via FTP, so you’d go with option #2 from that page and following the manual updating process: https://www.ads-software.com/support/article/updating-wordpress/#manual-update

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Unable to remove a local font from wp install (5.9.3)’ is closed to new replies.