• I have this website radhanathswami.info

    When i load the page, google fonts load little late. Si it shows the default theme fonts first and then after few second the fonts changes to the desired google fonts. this all transition looks ugly. What can be done.

    I am using three google fonts and place the following code in my header.php

    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Bilbo' rel='stylesheet' type='text/css'>

    And in my style.css i have added the following to overwrite the fonts by the theme.

    h1, h2, h3, h4, h5, h6, .total-comments, #header_area, #header{
        font-size: 26px !important;
        font-family: 'Oswald',sans-serif !important;
        font-weight: 400 !important;
        color: #555555 !important;
    }
    
    .advanced-recent-posts>li>h3>a{
        font-size: 18px !important;
        font-family: 'Oswald',sans-serif !important;
        font-weight: 400 !important;
        line-height: 20px !important;
         color: #555555 !important;
    }
    
    body {
        font-family: 'Droid Serif',sans-serif !important;
        font-size: 14px !important;
        line-height: 22px !important;
        color: #777777 !important;
    }
    
    #site-title{
         font-family: 'Bilbo',sans-serif !important;
    }
    
    #access a {
         color: #000000 ! important;
         font-family: 'bilbo',sans-serif ! important;
         font-size: 24px ! important;
    }
    
    #header input#s {
         background-color: #FFFFFF ! important;
         background-image: none ! important;
         box-shadow: none ! important;
         font-family: 'bilbo',sans-serif ! important;
         font-size: 20px ! important;
         padding-bottom: 0px ! important;
         padding-top: 0px ! important;
         border: 1px solid #E4D4EC !important;
    }
    
    #post-nav, #posts-nav {
        font-family: 'bilbo',sans-serif !important;
        font-size: 20px !important;
    }
    
    #sfpw>li>h4{
    	font-size: 16px !important;
    	line-height: 1.4em !important;
    	padding-bottom: 5px !important;
    	margin-bottom: 5px !important;
            font-family: 'Droid Serif',sans-serif !important;
    
    }

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘google fonts load slow’ is closed to new replies.