WordPress.org

Forums

[resolved] Fonts on Menu (27 posts)

  1. Claudia
    Member
    Posted 2 years 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 2 years ago #

  3. Claudia
    Member
    Posted 2 years ago #

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

  4. Andrew
    Forum moderator
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

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

  9. Claudia
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    Done!

  18. Andrew
    Forum moderator
    Posted 2 years 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 2 years ago #

    Done!

    Which one?

  20. Andrew
    Forum moderator
    Posted 2 years 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 2 years ago #

    done ;)

  22. Andrew
    Forum moderator
    Posted 2 years ago #

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

  23. Claudia
    Member
    Posted 2 years ago #

    Menu :)

  24. Andrew
    Forum moderator
    Posted 2 years 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 2 years 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 2 years 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 2 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic