Home Forums Fusion How can I change menu CSS and site description CSS.

Tagged: , , ,

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #48009

    merplex
    Participant

    I want to use the font that I already add font by “custom font” from Elementor previously.

    #48010

    Joshua
    Keymaster

    You can add the font name with the previous instructions I gave you (or following the documentation) under Customizer->Typography.

    Then after saving, select that as your font under Navigation in the Customizer.

    #48011

    merplex
    Participant

    right now, I can customize my font from Elementor custom font.
    (and I add these css at Appearance -> customize -> additional css:

    .navbar .nav-link {font-family:panpila; font-weight:bold; font-size:x-large;}
    
    .navbar .site-description {font-family:pattaya ; font-size:1rem;}
    
    .entry-title {font-family:panpila;color:#ad2727;}

    But there is the problem : please visit my site to take a look. http://www.ropekingdom.com

    Only frontpage that the menu font is show correct. But when I change to another menu (there is 4 menus on left primary menu) the font is not correct anymore (only font-family that show wrong, while font size is correct).

    ** please refresh(F5) page after you change the menu.

    #48013

    Joshua
    Keymaster

    It’s because your font styles are only added on the homepage:

    @font-face {
    	font-family: 'panpila';
    	font-style: normal;
    	font-weight: bold;
    	src: url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.eot');
    	src: url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.eot?#iefix') format('embedded-opentype'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.woff2') format('woff2'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.woff') format('woff'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.ttf') format('truetype'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.svg#panpila') format('svg');
    }

    Your fonts aren’t loaded on any other page.

    Why not use any of the recommendations I’ve made in this and the other thread you opened? It would make your life a lot easier.

    1. The font-face should be added via Additional CSS instead of the plugin you’re using.
    2. Additionally, adding the font name under Typography will let you control the font through your Customizer and create valid syntax.

    #48018

    merplex
    Participant

    Dear Joshua

    I am newie for wp, please be patient since I might be ask some non sense question. Hope you can understand.

    Right now I delete all my custom fonts which create by Elementor->custom font. And all follow your documentation.

    There is 2 question.

    1) when I try to add font name under Customizing->Typography . I can not find any link that I can paste my font file link.

    Custom Fonts
    Add your font name and <strong>font file links </strong> here. After saving they will appear in your typography options.

    I can only add new row and type in my font name. (and there is no result when I try to find it under typography after I save/publish)

    2) When I paste your code

    @font-face {
    	font-family: 'panpila';
    	font-style: normal;
    	font-weight: bold;
    	src: url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.eot');
    	src: url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.eot?#iefix') format('embedded-opentype'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.woff2') format('woff2'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.woff') format('woff'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.ttf') format('truetype'),
    		url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.svg#panpila') format('svg');
    }
    </blockquote>
    
    everything work as perfect. But when I try to shorten the url, it is broken again. 
    
    For example : src: url('https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.eot'); 
    I change it to src: url('wp-content/uploads/2018/05/psl_panpilas_bold-webfont.eot');
    
    Or even, I try to follow as your document said to copy all relate the font to child theme "fusion" (in assets/fonts folder). It still broken.
    
    <blockquote>Next, you need find the generated CSS by Font Squirrel in the CSS file and copy that to your “Additional CSS” field in theme options. It will probably look something like this:
    
    @font-face {
        font-family: 'my-cool-font';
        src: url('assets/fonts/my-cool-font-webfont.woff2') format('woff2'),
             url('assets/fonts/my-cool-font-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    Double check to make sure the URL to your fonts are correct. If the path is incorrect, the font will not be usable.

    For example : src: url(‘https://ropekingdom.com/wp-content/uploads/2018/05/psl_panpilas_bold-webfont.eot’);
    I change it to src: url(‘assets/fonts/psl_panpilas_bold-webfont.eot’);

    Could you give me and advice?

    I can make let you enter my computer by teamviewer and show me how easy it is. Only you tell me what time you want.

    • This reply was modified 2 months, 2 weeks ago by  merplex.
    • This reply was modified 2 months, 2 weeks ago by  merplex.
    #48021

    merplex
    Participant

    ? Do you still with me?

    #48023

    Joshua
    Keymaster

    1. You don’t need to copy any links. You just need to add your font name to Customizer->Typography. Just click “Add row” and type your font name – “panpila” in your case. After you save and refresh, the font will appear in all your typography lists in Customizer. You can select this font just like you would any other font.

    2. Why would you need to shorten the URL? If you shorten it, the path is relative and will be incorrect on most pages. You should use the full URL.

    #48026

    merplex
    Participant

    Thank you for your replying.

    Right now. I’ve create child theme already. but nothing add in style.css in my new child theme.

    Only way that make this work is adding these code in addition css under theme customize. (nothing relate in child theme, which mean everything gone after theme update right?)

    @font-face {
        font-family: 'panpila';
        src: url('https://ropekingdom.com/wp-content/themes/fusion-Child/assets/fonts/psl_panpilas-webfont.eot');
        src: url('https://ropekingdom.com/wp-content/themes/fusion-Child/assets/fonts/psl_panpilas-webfont.eot?#iefix') format('embedded-opentype'),
       url('https://ropekingdom.com/wp-content/themes/fusion-Child/assets/fonts/psl_panpilas-webfont.woff2') format('woff2'),
       url('https://ropekingdom.com/wp-content/themes/fusion-Child/assets/fonts/psl_panpilas-webfont.woff') format('woff'),
       url('https://ropekingdom.com/wp-content/themes/fusion-Child/assets/fonts/psl_panpilas-webfont.ttf') format('truetype'),
       url('https://ropekingdom.com/wp-content/themes/fusion-Child/assets/fonts/psl_panpilas-webfont.svg#panpila') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    Anyway the problem is solve.

    But one more question. I do add font name to Customizer->Typography by click “Add row” and type my font name – “panpila” but I can not find my font name anywhere in dropdown list after publish. weird?

    #48027

    Joshua
    Keymaster

    If you add that CSS under the Customizer, you can update your theme without any problems. You just want to avoid adding it directly to the Fusion theme since those files get updated.

    Did you refresh the page after saving the font?

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

You must be logged in to reply to this topic.