Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Use of font stored on server

    Hello

    I have the following in my code:

    Code:
    font-face { 
      font-family: News Cycle; 
        src: url('/fonts/NewsCycle-Regular.eot'); 
        src: local("News Cycle"), url('/fonts/NewsCycle-Regular.ttf'); 
    }
    but the Web page font is defaulting to Times Roman.

    The News Cycle font is held in its own font folder on my server in /httpdocs/font

    What might be the reason the Web page cannot see the font, please?

    Thanks

  • #2
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    try like that:
    Code:
    @font-face{ 
        font-family: myFont; 
        src: url(http://www.domain.com/fonts/myFont.ttf); 
    }
    @font-face{
        font-family: myFont2;
        src: url(http://www.domain.com/fonts/myFont.eot);
    }
    p{ 
       font-family: myFont, myFont2, Times, serif; 
    }
    Last edited by patryk; 04-30-2013 at 01:50 AM.

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Patryk

    I have tried this:
    Code:
    @font-face { 
     font-family: News Cycle;
     src: url(http://www.mySite.com/fonts/NewsCycle-Regular.eot);  
     src: url(http://www.mySite.com/fonts/NewsCycle-Regular.ttf); 
    } 
    
    p { 
     font-family: NewsCycle-Regular, "Times New Roman", Times, serif; 
    }
    and this:

    Code:
    @font-face { 
     font-family: News Cycle;
     src: url('http://www.mySite.com/fonts/NewsCycle-Regular.eot');  
     src: url('http://www.mySite.com/fonts/NewsCycle-Regular.ttf'); 
    }
    and this:

    Code:
    @font-face { 
     font-family: News Cycle;
    src: url(http://www.mySite.com/fonts/NewsCycle-Regular.ttf); 
    }
    and this:

    Code:
    @font-face { 
     font-family: News Cycle;
     src: url('http://www.mySite.com/fonts/NewsCycle-Regular.ttf'); 
    }
    and this:

    Code:
    @font-face{ 
        font-family: NewsCycle; 
        src: url(http://www.mySite.com/fonts/NewsCycle-Regular.ttf); 
    }
    @font-face{
        font-family: NewsCycle;
        src: url(http://www.mySite.com/fonts/NewsCycle-Regular.eot);
    }
    p{ 
       font-family: NewsCycle-Regular.ttf, NewsCycle-Regular.eot, Times, serif; 
    }
    but still no luck.

    The font is working on other pages that belong to the same site, but not on this one. This is the only page that is not governed by an external style sheet - the CSS is written in the page itself.

    Steve
    Last edited by SteveH; 04-30-2013 at 02:02 AM.

  • #4
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    i got it working by adding format()
    example: http://freedockstar.com/fontface/test.php
    Code:
    @font-face{
    	font-family: myFont;
    	src: url(BlackFlag.eot) format('eot'), url(BlackFlag.woff) format('woff'), url(BlackFlag.ttf) format('truetype');
    }
    
    body{
    	font-family: myFont;
    }
    Last edited by patryk; 04-30-2013 at 02:38 AM.

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #5
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    actually to have it working in IE too:
    Code:
    @font-face{
    	/*here you go IE. happy now?*/
    	font-family: myFont;
    	src: url(BlackFlag.eot);
    }
    @font-face{
    	font-family: myFont;
    	src: url(BlackFlag.eot) format('eot'), url(BlackFlag.woff) format('woff'), url(BlackFlag.ttf) format('truetype'), url(BlackFlag.svg) format('svg');
    }
    
    body{
    	font-family: myFont;
    }

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #6
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Patryk

    Thanks for all your help. I will focus on IE first. If I do this:

    Code:
    @font-face{
    	/*here you go IE. happy now?*/
    	font-family: MyFont;
    	src: url(NewsCycle-Regular.eot);
    }
    @font-face{
    	font-family: MyFont;
    	src: url(NewsCycle-Regular.eot) format('eot'), url(NewsCycle-Regular.woff) format('woff'), url(NewsCycle-Regular.ttf) format('truetype'), url(NewsCycle-Regular.svg) format('svg');
    }
    
    body{
    	font-family: MyFont;
    }
    or this (without 'Regular'):

    Code:
    @font-face{
    	/*here you go IE. happy now?*/
    	font-family: MyFont;
    	src: url(NewsCycle.eot);
    }
    @font-face{
    	font-family: MyFont;
    	src: url(NewsCycle.eot) format('eot'), url(NewsCycle.woff) format('woff'), url(NewsCycle.ttf) format('truetype'), url(NewsCycle.svg) format('svg');
    }
    
    body{
    	font-family: MyFont;
    }
    I still only see Times Roman.

    The page is here: http://www.proofreading4students.com/CSS_creator.asp

    Steve

  • #7
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    you are reffering to http://www.proofreading4students.com/NewsCycle.eot for example and it returns 404 (no such file)

    and also then you override everything with
    Code:
    @font-face{
    	font-family: myFont;
    	src: url(NewsCycle-Regular.eot) format('eot'), url(Newscycle-Regular.woff) format('woff'), url(NewsCycle-Regular.ttf) format('truetype');
    }
    
    body{
    	font-family: Newscycle-Regular;
    }
    and on top of that you don't have "Newscycle-Regular" defined.
    remove that last piece of code and (what you see above), and correct URL's. browser must be able to download fonts.....

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #8
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

  • #9
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    it's the same page.
    i'm saying that you have there url(NewsCycle.eot) and that is equal to http://www.proofreading4students.com/NewsCycle.eot
    you need to put your fonts somewhere where they can be accessed and put that url in css.
    and like i said before: your second @font-face and body are overriding everthing written before.

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • Users who have thanked patryk for this post:

    SteveH (04-30-2013)

  • #10
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    OK, I have understood now. The font is not here (as I have it):

    http://www.proofreading4students.com/NewsCycle.eot

    The font is in its own folder called 'fonts'. That's why they cannot be accessed. I will sort that out now. The penny's dropped!

    Thank you for your time and patience. I am very grateful.

    Steve

  • #11
    New Coder
    Join Date
    Aug 2010
    Location
    myeik
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 5 Posts
    please find the correct path about the font place to connect link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •