WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I change the site title font to Segoe Script (27 posts)

  1. msnew007
    Member
    Posted 1 year ago #

    I would like to know how I change the site title font to Segoe Script.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you acquired that font? You should have a font file.

  3. msnew007
    Member
    Posted 1 year ago #

    I wasn't aware I would have to acquire a font. Will you advise how I do this?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Normally, you'd search a font-sharing website like Font Squirrel.

    Segoe Script isn't freely available, therefore Font Squirrel is no use.
    It's Microsoft's font.

    If you want a free option, consider a similar font (right of page), then run a search for that font on Font Squirrel.

  5. msnew007
    Member
    Posted 1 year ago #

    I like Jenna Sue from Font Squirrel?
    http://www.fontsquirrel.com/fonts/jenna-sue

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sure.

    - Download the font.
    - Create a directory in your theme's folder named, 'fonts' or something suitable.

    Go to the @font-face generator and follow the instructions until you download your zip'd fonts.

  7. msnew007
    Member
    Posted 1 year ago #

    Hi Andrew,

    I downloaded the font as you advised and I followed the instructions until I downloaded the zip'd fonts.
    I'm ready for the next step.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    - 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.

    Can you then post here the @font-face code that's in your Custom CSS Manager?

  9. msnew007
    Member
    Posted 1 year ago #

    I goofed somewhere, because it didn't make the change. Here is a screenshot of my Custom CSS Manager

    http://awesomescreenshot.com/0derkprc0

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    You'll have a lot of syntax errors if you use that code.
    Try removing all of these characters;

    \
  11. msnew007
    Member
    Posted 1 year ago #

    I removed all of the characters \ but after I saved the changes, they reappear automatically. Any advice?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    On line 6, press the return carriage and enter this a closing curly bracket.
    E.g

    5|  font-size: 54px;
    6| }
    7| @font-face {

    Then remove those slashes again.

  13. msnew007
    Member
    Posted 1 year ago #

    This is where I saved them in my File Manager

    http://awesomescreenshot.com/08brkqp91

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Okay, I think you need to do this step again;

    - Create a directory in your theme's folder named, 'fonts' or something suitable.

  15. msnew007
    Member
    Posted 1 year ago #

    I created a directory in my theme's folder named it "font"

    http://awesomescreenshot.com/020rkra9c

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    Okay then this

    - Upload all fonts (only font files, not HTML) to the designated directory that you created.

  17. msnew007
    Member
    Posted 1 year ago #

    I reviewed the fonts that I uploaded and none of them are HTML.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    I'm not sure how far you are in the steps, but the final step is giving your site title that font,
    E.g;

    #site-title {
     font-family: 'jenna_sueregular';
    }
  19. msnew007
    Member
    Posted 1 year ago #

    Andrew, thank you for all of your help and your patience. I will keep trying and hopefully I will figure it out. Thank you for your time.

  20. msnew007
    Member
    Posted 1 year ago #

    Hi Andrew,
    I just noticed this step:
    Edit the index.html file and look for the CSS in the <head> section.

    I don't understand what you mean by Edit the index.html file and look for the CSS in the <head> section.

    Could you please advise?

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    The index.html file from within the .zip file you extracted (from the generator).

  22. msnew007
    Member
    Posted 1 year ago #

    There is not an index.html file after extracting from the generator.

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is there a HTML file with another name?

  24. Claudia
    Member
    Posted 1 year ago #

    Hello Andrew!

    I asked this question yesterday and you pointed to this thread.

    I did everything and the only step I'm missing here is the one that says

    "Edit the @font-face code in your Custom CSS Manager to use the correct directories when referring the fonts."

    I'm working directly on my File Manager on my Hosting Company and I don't understand how am i going to edit this info.

    The path where the font is is the following one:

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

    And on my Child-Theme CSS file I have:

    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('wp-content/themes/Stella Child Theme/Fonts') format('truetype'),
             url('trial_by_cupcakes_-_katierose-webfont.svg#katieroseregular') format('svg');

    What should I replace and where?

    Thank you!

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    Hi Claudia, we'll need to return to your thread for a discussion. This thread is already crowded.

  26. Claudia
    Member
    Posted 1 year ago #

    I already closed it, is that ok?

  27. Andrew
    Forum Moderator
    Posted 1 year ago #

    Don't worry, I reopened it ;) but you can mark threads 'resolved' and 'unresolved' at will, any time you want.

Topic Closed

This topic has been closed to new replies.

About this Topic