Olmyster Posted October 13, 2022 Posted October 13, 2022 Hi, I try to change the default font-family by adding the following lines in custom.css .body { font-family: 'Creepster', Arial, sans-serif; } but it won't work. Any help would be welcome. SeNioR- 1
Nathan Explosion Posted October 13, 2022 Posted October 13, 2022 drop the . before body - unless you've added a class called 'body' to your <body tag?
Olmyster Posted October 13, 2022 Author Posted October 13, 2022 I don't add a class so, as you suggest, I have dropped the point but nothing change.
Olmyster Posted October 13, 2022 Author Posted October 13, 2022 Solved. It was because it's not sans-serif font but cursive 🙂
Olmyster Posted October 13, 2022 Author Posted October 13, 2022 Unfortunately, what I thought was solved is not. I still have the same problem. My default font change is not reflected despite adding the appropriate lines in custom.css. I'm completely lost.😐
Olmyster Posted October 13, 2022 Author Posted October 13, 2022 I'm still trying to figure out why I can't integrate a Google font into my site via "custom.css". The font I want to use is "Creepster". So the lines I have added are as follows @import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet'); body *{ font-family: Creepster, cursive; !important } But it still doesn't work. Thank you for your help.
Ehren Posted October 14, 2022 Posted October 14, 2022 Hello, This code is working fine for me: @import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap'); body { font-family: Creepster, cursive; } If you're trying to use it on a 3rd party theme, post your URL here and I'll take a closer look for you 🙂 SeNioR- 1
Olmyster Posted October 14, 2022 Author Posted October 14, 2022 Hello @Ehren. I don't use a 3rd party theme. It's the default theme. I use some plugins but the problem is not caused by them as the problem persists even when I disable them. You can view the site at https://www.accents-poetiques.com
opentype Posted October 14, 2022 Posted October 14, 2022 Before assigning a new Google font, you need to turn off the Google fonts assigned in your theme settings. You are still calling Merriweather from Google. I have a detailed article about the process here: https://www.opentype.space/free-articles/how-to-use-custom-webfonts-with-invision-community-r4/
Olmyster Posted October 14, 2022 Author Posted October 14, 2022 16 minutes ago, opentype said: Before assigning a new Google font, you need to turn off the Google fonts assigned in your theme settings. This is already the case but you cannot see it because it is another theme that is a copy of the one displayed by default. As I don't want my members to be able to access it now, it is only visible to the "administrator" group.
Ehren Posted October 14, 2022 Posted October 14, 2022 3 hours ago, Olmyster said: This is already the case but you cannot see it because it is another theme that is a copy of the one displayed by default. As I don't want my members to be able to access it now, it is only visible to the "administrator" group. We’ll need to view the broken/admin theme to find out why the font isn’t loading.
Olmyster Posted October 14, 2022 Author Posted October 14, 2022 @Ehren, if you're ok, I'll send you by PM an access to provide you the ability to see the theme.
Ehren Posted October 14, 2022 Posted October 14, 2022 Your site is currently using this code: @import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet'); body { font-family: Creepster, cursive; } It needs to be this: @import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap'); body { font-family: Creepster, cursive; } With that said, import statements should only appear at the very top of your css file. Depending on how your theme has been coded, the custom.css file can be appended to other files, which means that your import statement is no longer at the top. A safer solution would be to use the <link> code. Add this to the <head> area of your theme: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet"> Then use this in your css: body { font-family: 'Creepster', cursive; } Afrodude and SeNioR- 2
Olmyster Posted October 15, 2022 Author Posted October 15, 2022 Thank you @Ehren, your solution solved my problem. What is strange is the necessity to use the <link> code in the <head> area of my theme because this theme is just a simple copy of the original theme, nothing more.
Ehren Posted October 15, 2022 Posted October 15, 2022 It’s not actually a limitation with our software or an issue with your theme, it’s just the way import statements work. You can read more about it here. 🙂 Afrodude and Olmyster 2
Recommended Posts