Fonts on Menu

  • Resolved Claudia

    (@twiggs)


    11 years, 10 months 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

Viewing 15 replies - 1 through 15 (of 26 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Follow the steps from this thread https://www.ads-software.com/support/topic/how-do-i-change-the-site-title-font-to-segoe-script?replies=23

    Thread Starter Claudia

    (@twiggs)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Claudia

    (@twiggs)

    Yes, I did that.

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Claudia

    (@twiggs)

    @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?

    Thread Starter Claudia

    (@twiggs)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter Claudia

    (@twiggs)

    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!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Claudia

    (@twiggs)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter Claudia

    (@twiggs)

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

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘Fonts on Menu’ is closed to new replies.