Jump to content

Change default font-family

Olmyster
Olmyster
in Classic self-hosted technical help

Featured Replies

Posted

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.

    drop the . before body - unless you've added a class called 'body' to your <body tag?

     

    • Author

    I don't add a class so, as you suggest, I have dropped the point but nothing change.

    • Author

    Solved. It was because it's not sans-serif font but cursive 🙂 

    • Author

    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.😐

    • Author

    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.

     

    Hello,

    This code is working fine for me: 

    @import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
body {
  font-family: Creepster, cursive;
}

     

    Could contain: Text, Paper

    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 🙂

    • Author

    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

     

    • Author
    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.

    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. 

    • Author

    @Ehren, if you're ok, I'll send you by PM an access to provide you the ability to see the theme.

    Sure.

    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;
}

     

    • Author

    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.

    Go to topic listing

    Recently Browsing 0

    • No registered users viewing this page.