Please patiently wait till your ticket is proceeded. In case you'd add a new comment before we have a chance to respond, your ticket will go down the list, so, you must edit your previous comment instead. 

Okay
  Public Ticket #2149869
Can't upload custom fonts
Closed

Comments

  • makerofnothing started the conversation

    Hi, I already saw the others tickets about the same issue I have, but none of those solutions worked for me so far.

    So, I would like to install two custom fonts in Brook, I already installed them in brook/assets/fonts/ with their CSS, and I also added the code to my functions.php to load and enqueue my font.

    In fact, I can load the font, I mean i can see it and select it in the Typo Menu from Brook, but I get a basic font instead of my custom font (Cocomat), something like sans-serif or else. Also I don't get the right variants, I only have regular/italic/700/700italic.

    I still have a second font to install, but I'm still trying to make at least one work.

    Well, thank you for your time.

    Regards.


    My code is :

    -> wp-content/themes/brook-child/functions.php

    // Add custom font to font select
    add_filter( 'kirki_fonts_standard_fonts', 'brook_child_add_custom_font' );

    function brook_child_add_custom_font( $fonts ) {   
        $fonts['cocomat'] = array(      
            'label'    => 'Cocomat',
            'variants' => array( 300, 'regular', 'bold' ),
            'stack'    => 'Cocomat',  
        );
        return $fonts;
    }
    // Enqueue custom font
    add_action( 'brook_enqueue_custom_font', 'brook_child_enqueue_custom_font' );

    function brook_child_enqueue_custom_font ( $font ) {   
        if( $font === 'Cocomat' ) {       
            wp_enqueue_style( 'cocomat-font', get_stylesheet_directory_uri() . '/assets/fonts/cocomat/cocomat.css', null, null );   
        }
    }


    -> wp-content/themes/brook/assets/fonts/cocomat/cocomat.css

    @font-face {
      font-family: 'Cocomat';
      src: url('Cocomat-Light-trial.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;  
    }
    @font-face {
      font-family: 'Cocomat';
      src: url('Cocomat-Bold.otf') format('truetype');
      font-weight: bold;
      font-style: normal; }
    @font-face {
      font-family: 'Cocomat';
      src: url('Cocomat-Ultralight-trial.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
    }

    And in -> wp-content/themes/brook/assets/fonts/cocomat/ I have 4 files :

    - Cocomat-Light-trial.ttf

    - Cocomat-Bold.otf

    - Cocomat-Ultralight-trial.ttf

    - cocomat.css



  •  1,621
    Bryan replied

    Hi

    You should edit the page to check the Preset option if the page is loading. If yes, theme will load the fixed font and style to display without your set up.

    Thanks

  • makerofnothing replied

    Well, none of my page have the Preset Options enabled. They're all setup with "none", so they should get the styles from Customize.

  •  1,621
    Bryan replied

    Hello

    Would you mind providing us with login credentials so we can take a closer look? 

    Thanks

  •   makerofnothing replied privately
  •  1,621
    Bryan replied

    Hi

    I can see the text and heading in your site is loading your custom font Cocomat as well now:

    http://prntscr.com/p7220k

    Please check it again.

    Thanks

  • makerofnothing replied

    Yes, well I told you that I get an other font instead of the custom one, it's loading the font in the CSS, at least it looks like it, but it still is an other font in the heading and body. I thought my .ttf files or my CSS were wrong, so I tried them in local, and they work perfectly, I'll show you what the "Cocomat" is suppose to look like, you will see, it's quite different than the font in the website.

    That's why, I tried to contact you, yes I can select the font, yes I can see the font in the CSS, but It still isn't the right font in my website.

    Attached files:  Capture d’écran 2019-09-17 à 09.35.09.jpg
      Capture d’écran 2019-09-17 à 09.37.25.jpg

  •  1,621
    Bryan replied

    Hi

    The theme is loading the font name from your custom font. The only thing you need to be sure is the font in .ttf file and css code are correct that need control from your side. 

    Also the font display is also related to other css style. Not only the font name. 

    Thanks

  • makerofnothing replied

    Well, you're not really helping me here, I just told you I already tried my ttf and css files (the exact same ones) in a local server and they worked fine. So it's not coming from them. Also, I don't see any override in my CSS, it should display my custom font...

    Is my code in my functions.php at least correct ? Maybe there's a little typo preventing my website to load the correct files, I don't know....

  •  1,621
    Bryan replied

    Hi

    The code is correct. I tried to compare the font on your site with Cocomat font from google, it is displaying well with that font style.: 

    http://macogestion.fr/dev/event/

    https://www.dafont.com/cocomat.font

    https://prnt.sc/p80doi

    Thanks

  • makerofnothing replied

    I mean, I understand that it can be difficult to see the differences if the text isn't in your native language, but come on, that's definitely not the same font. The font I have right now is a "serif" font and the custom font I want is a "sans-serif", so they're pretty different, just look at the end of each letter, the font on my website have "legs/feet", Cocomat not. Look at my screenshot, I hope you will see the difference.

    I understand that maybe you can't find a solution to my problem, and if that's the case just tell me, but don't tell me it works fine when it's not the case.

    I really like your theme, it's one of the best, and I would really appreciate if you could find a true solution.

    Attached files:  Capture d’écran 2019-09-19 à 09.33.32.jpg

  •  1,621
    Bryan replied

    Hi

    You can try to use this code to apply "sans-serf" style for Cocomat font:

    h1, h2, h3, h4, h5, h6, th, p, a, [class*="hint--"]:after {
        font-family: "Cocomat", sans-serif !important;
    }
    

    THanks

  • makerofnothing replied

    That don't works either, I just get the sans-serif font not my custom one. Anyway, I wanted to avoid doing that, but you can't find any solution, so I'm adding my font directly into my CSS, obviously it works.

    You might want to find a better way to add custom font to your theme. With the same .ttf files and the same CSS, it works when I add my @font-family in my style.css but not when using your code for the functions.php, there something wrong somewhere.

    You can close the ticket.

  •  1,621
    Bryan replied

    Thank for your kind and have a great weekend ahead.