WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Fonts on Menu (27 posts)

  1. Claudia
    Member
    Posted 1 year ago #

    Hello everyone!

    Ok, so I'm working on a template and I want to customize the menu bar using a kind of font that is not a web-font, but a font I purchased.

    How do I do it?

    It's really important for me to use that font!

    Thank you so very much!

    Claudia

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

  3. Claudia
    Member
    Posted 1 year ago #

    Thank you so much, I'm already following the steps!

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Following on from that thread & your post in it, I'm going to post this for quick reference:
    - Unzip the files wherever you want.
    - Upload all fonts (only font files, not HTML) to the designated directory that you created.
    - Edit the .html file (from the unzip) and look for the CSS in the <head> section.
    - Copy all @font-face code.
    - Paste in your Custom CSS Manager.
    - Edit the @font-face code in your Custom CSS Manager to use the correct directories when referring the fonts.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Were you able to Paste in your Custom CSS Manager that @font-face code from the HTML file of the .zip file?

  6. Claudia
    Member
    Posted 1 year ago #

    Yes, I did that.

    It was just on the last step that I don't know what to do.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    That same code you pasted in your Custom CSS manager, you need to edit that.

    What you need to edit is; the URL paths that point to the files.
    These are taken originally from the example .zip file.
    The URL paths need to match wherever you put your fonts.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Post here the CSS afterwards of your @font-face code that's not working (if it's not working).

  9. Claudia
    Member
    Posted 1 year ago #

    @font-face {
        font-family: 'katieroseregular';
        src: url('trial_by_cupcakes_-_katierose-webfont.eot');
        src: url('trial_by_cupcakes_-_katierose-webfont.eot?#iefix') format('embedded-opentype'),
             url('trial_by_cupcakes_-_katierose-webfont.woff') format('woff'),
             url('trial_by_cupcakes_-_katierose-webfont.ttf') format('truetype'),
             url('trial_by_cupcakes_-_katierose-webfont.svg#katieroseregular') format('svg');
        font-weight: normal;
        font-style: normal;

    This is what's on HTML file, and what I pasted on the CSS file. My doubt is what should I change and how?

    The URL path is the following... wait just one question that is related to another thread I just started. I'm trying to make this work on a child theme I just created. My issue is that it seems the website is not reading the CSS file of the Child Theme, but from the parent theme. So where should I paste this code after all? As well as creating the folder names fonts and uploading the fonts itself?

  10. Claudia
    Member
    Posted 1 year ago #

    Sorry for the typos! I meant:

    So where should I paste this code after all? And where was I supposed to create the folder named Fonts, and upload the font itself? To the parent theme folder or the child theme folder?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    This is what's on HTML file, and what I pasted on the CSS file. My doubt is what should I change and how?

    Which directory is your font in?
    E.g is it in /wp-themes/themes/yourThemeName/fonts/ (please state the actual directory names) ? I'll make the URLs for you once I know, as you're having a hard time with this.

    I'll look into your other thread for that issue now.

  12. Claudia
    Member
    Posted 1 year ago #

    The directory is:

    /wp-content/themes/Stella Child Theme/Fonts/trial_by_cupcakes_-_katierose-webfont.ttf

    Thank you so much, you are fabulous with the support, let me tell you that!

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Just a quick query, are you sure there are spaces in your folder name "/Stella Child Theme". That doesn't sound right.

  14. Claudia
    Member
    Posted 1 year ago #

    You are right, it doesn't sound right. But it's weird because when I copy it from the File Manager it is exactly like this.

    What if I change the name without the spaces?

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    I don't know what will happen, let's just leave it with spaces for now.
    In your Fonts folder it seems there is only one font. From the .zip file, there should be around 5.

  16. Claudia
    Member
    Posted 1 year ago #

    Oh yes you're right. I just uploaded the file I immediately recognized as a font. Wait, I will upload the others as well!

  17. Claudia
    Member
    Posted 1 year ago #

    Done!

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    Nice work, so your @font-face code with the correct URLs should be this;

    @font-face {
        font-family: 'katieroseregular';
        src: url('/wp-content/themes/StellaChildTheme/trial_by_cupcakes_-_katierose-webfont.eot');
        src: url('/wp-content/themes/StellaChildTheme/trial_by_cupcakes_-_katierose-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/StellaChildTheme/trial_by_cupcakes_-_katierose-webfont.woff') format('woff'),
             url('/wp-content/themes/StellaChildTheme/trial_by_cupcakes_-_katierose-webfont.ttf') format('truetype'),
             url('/wp-content/themes/StellaChildTheme/trial_by_cupcakes_-_katierose-webfont.svg#katieroseregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    There's still another step, by the way.

  19. Claudia
    Member
    Posted 1 year ago #

    Done!

    Which one?

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    Whoopsidasies!
    This is your @font-face code. I missed out the Fonts folder;

    @font-face {
        font-family: 'katieroseregular';
        src: url('/wp-content/themes/StellaChildTheme/Fonts/trial_by_cupcakes_-_katierose-webfont.eot');
        src: url('/wp-content/themes/StellaChildTheme/Fonts/trial_by_cupcakes_-_katierose-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/StellaChildTheme/Fonts/trial_by_cupcakes_-_katierose-webfont.woff') format('woff'),
             url('/wp-content/themes/StellaChildTheme/Fonts/trial_by_cupcakes_-_katierose-webfont.ttf') format('truetype'),
             url('/wp-content/themes/StellaChildTheme/Fonts/trial_by_cupcakes_-_katierose-webfont.svg#katieroseregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  21. Claudia
    Member
    Posted 1 year ago #

    done ;)

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

    Now... Which page element(s) do you want the font applied to?

  23. Claudia
    Member
    Posted 1 year ago #

    Menu :)

  24. Andrew
    Forum Moderator
    Posted 1 year ago #

    Then you'll need to add this in your Child Theme stylesheet;

    div#navigation ul li a {
     font-family:  'katieroseregular';
    }

    But I'd first make that header.php change we discussed in the other thread.

  25. Claudia
    Member
    Posted 1 year ago #

    It's working, it's working! Oh whow! Thank you so much!

    By the way what did you change?

    I need to learn about this! I cannot believe that I actually succeeded in creating a Child Theme! This has been such a monster on my head for so long!

  26. Andrew
    Forum Moderator
    Posted 1 year ago #

    By the way what did you change?

    I swapped around a couple of lines of code, so the base.css file loads before the style.css file. Otherwise, your base.css styles would have taken precedence over your style.css file, it would have been much harder to add styles in this circumstance.

    It was this;

    <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/base.css"/>

    And I changed to this;

    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/base.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>"/>

    Thanks for contributing to the WordPress community, Claudia :)

  27. Andrew
    Forum Moderator
    Posted 1 year ago #

Topic Closed

This topic has been closed to new replies.

About this Topic