WordPress.org

Ready to get started?Download WordPress

Forums

webkit font or dynamic font? (25 posts)

  1. emaarkhan
    Member
    Posted 1 year ago #

    Hi,
    I m looking for have 2 icons namely franchise and hancock on a website. But i don't know how to use dynamic font.Can anyone help me on how to use it

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Are you trying to add icons or a different font?

  3. emaarkhan
    Member
    Posted 1 year ago #

    trying to use it on #access selector and another one on title. i want to use font.

  4. killerdeveloper
    Member
    Posted 1 year ago #

    Maybe you can try my plugin "Font" it will definitely let you change font for "#access" or any other selector and it works visually so no coding here.
    http://wordpress.org/extend/plugins/font/

  5. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    You should be able to do this via your theme's stylesheet.

  6. emaarkhan
    Member
    Posted 1 year ago #

    How? that font isn't normal arial or tahoma, its a choice of font.so it would be dynamically.shouldn't it be?

  7. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    What do you mean by "its a choice of font"?

  8. emaarkhan
    Member
    Posted 1 year ago #

    The font name is franchise and hancock. Not everyone have it, its selective font. I want to use it using webkit or typekit, but in typekit both of them aren't available so i m left with webkit. so can you tell me how to

  9. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    I'd suggest you start by reviewing the CSS font-family rule.

  10. emaarkhan
    Member
    Posted 1 year ago #

    That is css2 right? and in css2. the given fonts are used from user pc if available, otherwise it falls back to other mentioned font. But what if the font isn't on system.

  11. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    You should always end the font-family list with a generic font-family such as sans-serif.

  12. emaarkhan
    Member
    Posted 1 year ago #

    i can use @font-face bt where to put the font n how to use it in #access selector.example wuld help.thnx

  13. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

  14. emaarkhan
    Member
    Posted 1 year ago #

    esmi i looked and it helped a lot. thanks but now the font get into its real font. i think i might have mistake in my trailing slashes. Please help me out here

    @font-face {
        font-family: 'franchiseregular';
        src: url('../franchise-bold-webfont.eot');
        src: url('../franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('../franchise-bold-webfont.woff') format('woff'),
             url('../franchise-bold-webfont.ttf') format('truetype'),
             url('../franchise-bold-webfont.svg#franchiseregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

    and the fonts are in a folder in theme folder that i have e.g /themes/nf/font
    am i doing something wrong?

  15. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Try using a more specific URL to each font, starting from the root directory of your WordPress application.
    E.g

    /wp-content/themes/yourTHeme/yourDirectoryToTheFont/franchise-bold-webfont.eot
  16. emaarkhan
    Member
    Posted 1 year ago #

    Its nt helping :(

  17. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    To clarify, which directory are you fonts within and how which are your font files?

  18. emaarkhan
    Member
    Posted 1 year ago #

    /themes/nf is the theme and /themes/font is the folder the fonts are in.

    Edit: they seems to work with the local names. the one installed my system but not with franchiseregular that is given the name for font-family in font face

  19. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Through a browser inspector tool, does the Console section reveal any errors?

  20. emaarkhan
    Member
    Posted 1 year ago #

    I checked the console for firebug under error and warning. Nothing there. Please check my last post. i edited it,

  21. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Place the fonts folder inside the current theme's folder ie wp-content/themes/theme-name/fonts. Then just use:

    @font-face {
        font-family: 'franchiseregular';
        src: url('fonts/franchise-bold-webfont.eot');
        src: url('fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/franchise-bold-webfont.woff') format('woff'),
             url('fonts/franchise-bold-webfont.ttf') format('truetype'),
             url('fonts/franchise-bold-webfont.svg#franchiseregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  22. emaarkhan
    Member
    Posted 1 year ago #

    esmi your a ninja diva.thanks a lot for the help! it worked. also thanks other for their input. I have a question. how does trailing slashes work and what does ../ means

  23. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    ../ means "first go up one folder" (ie to the immediate parent folder).

  24. emaarkhan
    Member
    Posted 1 year ago #

    oh ok. stupid me..but thanks esmi!

  25. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    No problem. In general - and because of the unpredictable manner in which WordPress can interpret relative urls - it's always better to keep everything theme-related inside that theme's folder. It makes the CSS so much easier to wrangle.

Topic Closed

This topic has been closed to new replies.

About this Topic