This topic contains 5 replies, has 2 voices, and was last updated by  Skandha 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #145804

    jeanette.denham1
    Participant

    Hello there

    I have a clean education pro theme and would like to customise the site title font – the included font families do not match my needs.
    How might I add a custom css to achieve this?

    #145813

    Skandha
    Participant

    @jeanette-denham1: Please let me know which font do you want to apply to the site title so that I can provide you the necessary CSS Code.

    Kind Regards,
    Skandha

    #145972

    jeanette.denham1
    Participant

    Hi Skandha
    I would like to use the font Zapfino.

    Regards

    #146062

    Skandha
    Participant

    @jeanette-denham1: You need to first create a child theme for this purpose. If you do not know how to create a child theme you can use Generate Child Theme Plugin.

    After creating child theme go to the child theme folder and create a new folder fonts. Paste all the required fonts file in that folder.

    Go to => Child Theme Folder => style.css and add the following CSS Code.

    @font-face {
    	font-family: zapfino;  
    	src: url("fonts/ZapfinoExtraLT-One.otf"),
    		 url("fonts/ZapfinoExtraLTPro.otf"),
    		 url("fonts/ZapfinoExtraLT-Two.otf"),
    		 url("fonts/ZapfinoForteLTPro.otf");
    	font-weight: normal;  
    }

    Replace the file name with your font file names.

    Go to => Appearance => Customize => Additonial CSS and add the following CSS Code.

    .site-title {
        font-family:zapfino;
        font-size:100px;
    }

    You can change the font-size according to your requirement.

    Let me know if this works out.
    Kind Regards,
    Skandha

    #149927

    jeanette.denham1
    Participant

    Hi Skandha

    Thanks for your help – I have been a bit busy but finally got around to attempting this. I haven’t had any luck making it work so far. Do I just put the code at the end of the CSS? It doesn’t look like real CSS – it just includes a lot of generic information about the site. Is this typical of a child theme CSS?

    Also, just to clarify, do I add the url of the site, or do I leave it at ‘url’ as you have above?

    Cheers
    Jeanette Denham

    #149973

    Skandha
    Participant

    @jeanette-denham1: If you follow the instruction I gave above step by step you should be able to use the font on your site.
    If you are having trouble making it work you can always hire a customizer.

    Kind Regards,
    Skandha

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.