Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Can i add a font to Additional CSS file in Word Press starter?

I have made a site using Word Press Starter with the Custom CSS Add On; however, I cant seem to use a font in it. The FREE theme does not have a way to change it anywhere else which is understood but I was hoping just this code in the CSS file would work. There are no Theme Files accessible.

Additional CSS FILE:

@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');

body {  
  font-family: "Limelight", sans-serif !important;  
  margin: 0px;
  letter-spacing: 0.5px;
  background-color: #2b2a27;
}
Tags:

2

Answers


  1. 0

    The problem is that themes often come with their own CSS that overrides the general configuration.

    Likely your best bet is to take the nuclear option of

    body { 
   font-family: "Limelight", sans-serif !important; 
}
* { 
    font-family:inherit !important;
}

    which will overwrite every individual entry of font-family with inherit.

    It’s not always recommended to use * for most things, but your other choice is to:

    1. download the free theme,
    2. open its CSS file,
    3. find/replace all entries of font-family with either "Limelight", sans-serif !important; or inherit,
    4. upload the modified CSS file as part of your CSS.

    Which can get… messy. Simply adding a wildcard *{ font-family: !important}, and adding !important to your body{font-family} is probably what you want to do.

    Login or Signup to reply.
  2. 0

    I recommend you open the functions.php file in this path: wp-content/themes/your-theme-name and add the following code:

    add_action('wp_head', 'jamie_styles', 100);
function jamie_styles(){
    echo "<style>
        @import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
        p, h1, h2, h3, h4, h5, h6, span, ul, li, ul, blockquote,  {  
        font-family: "Limelight", sans-serif !important;  
        margin: 0px;
        letter-spacing: 0.5px;
        background-color: #2b2a27;
        }  
        </style>        

    ";
}

    please pay attention this function will add the style as inline CSS in the header of all pages.
    In case you do not have direct access to your host, you can edit your functions.php in the following link:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search