WordPress.org

1. emaarkhan
   Member
   Posted 6 months 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 6 months ago #
   

   Are you trying to add icons or a different font?

3. emaarkhan
   Member
   Posted 6 months ago #
   

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

4. killerdeveloper
   Member
   Posted 6 months 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 6 months ago #
   

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

6. emaarkhan
   Member
   Posted 6 months 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 6 months ago #
   

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

8. emaarkhan
   Member
   Posted 6 months 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 6 months ago #
   

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

10. emaarkhan
    Member
    Posted 6 months 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 6 months ago #
    

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

12. emaarkhan
    Member
    Posted 6 months 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 6 months ago #
    

    See http://www.w3schools.com/cssref/pr_font_font-family.asp

14. emaarkhan
    Member
    Posted 6 months 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
    Volunteer Moderator
    Posted 6 months 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 6 months ago #
    

    Its nt helping :(

17. Andrew Nevins
    Volunteer Moderator
    Posted 6 months ago #
    

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

18. emaarkhan
    Member
    Posted 6 months 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
    Volunteer Moderator
    Posted 6 months ago #
    

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

20. emaarkhan
    Member
    Posted 6 months 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 6 months 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 6 months 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 6 months ago #
    

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

24. emaarkhan
    Member
    Posted 6 months ago #
    

    oh ok. stupid me..but thanks esmi!

25. esmi
    Theme Diva & Forum Moderator
    Posted 6 months 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.

Reply

You must log in to post.