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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    523
    Thanks
    83
    Thanked 0 Times in 0 Posts

    Warning about @ when using CSS fonts

    Hello

    I understand that it is now not considered chic to use CSS @ with fonts as in:

    Code:
    @font-face {
        font-family: Droid Sans;
        src: url(../fonts/DroidSans-webfont.eot);
        src: local("Droid Sans"),url(../fonts/DroidSans-webfont.woff);
    }
    I get warnings in my software (Visual Studio 2017) when I do so.


    What should I be using in place of the above, please?

    Thanks.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,301
    Thanks
    7
    Thanked 1,360 Times in 1,329 Posts
    And what do the warnings say, please?

  3. #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,499
    Thanks
    3
    Thanked 624 Times in 610 Posts
    Hi there Blue1,

    the only warning that the W3C CSS validator gives is...

    Redefinition of src

    So this should be OK...
    Code:
    
    @font-face {
    @font-face {
        font-family: Droid Sans;
        src: url(../fonts/DroidSans-webfont.eot),
             url(../fonts/DroidSans-webfont.woff);
     }
    Note:-


    The local statement is there to support IE6 - 8, and can now be safely removed.
    If you are not interested in catering for IE < 10


    Code:
    
    @font-face {
        font-family: 'Droid Sans';
        src: url(../fonts/DroidSans-webfont.woff);
     }

    coothead
    ~ the original bald headed old fart ~

  4. #4
    Regular Coder
    Join Date
    Feb 2014
    Posts
    523
    Thanks
    83
    Thanked 0 Times in 0 Posts
    Many thanks for that, Coothead. I will try it when I get back to my usual PC - I will also get details of the exact warning - it will be tomorrow when I post back.

    Thanks again.

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,425
    Thanks
    4
    Thanked 488 Times in 476 Posts
    Quote Originally Posted by Blue1 View Post
    I get warnings in my software (Visual Studio 2017) when I do so.


    What should I be using in place of the above, please?
    Just about any plain text editor will do, even "Visual Studio Code" (which has dick-all to do with the actual Visual Studio) is a step up if you ignore its silly pointless warnings.

    There is a REASON for the double SRC, it IS valid CSS3, and Microshaft (as always) is wrong by pointing out -- laugh of laughs -- a workaround for their own bloody browsers!

    The reason to say a first SRC is the initial setting for legacy IE that doesn't support other formats. There's nothing wrong with doing it, no legitimate reason to remove it, and it's only a handful of characters.

    A "complete" declaration being more along the lines of:

    Code:
    @font-face {
    		font-family: 'droid sans';
    		src: url('fonts/DroidSans-webfont.eot');
    		src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
    				 local("Droid Sans")
    				 url('fonts/DroidSans-webfont.woff2') format('woff2'),
    				 url('fonts/DroidSans-webfont') format('woff'),
    				 url('fonts/DroidSans-webfont.ttf') format('truetype'),
    				 url('fonts/DroidSans-webfont.svg#permanent_marker') format('svg');
    		font-weight: normal;
    		font-style: normal;
    }
    Note if you have spaces in the font name, you MUST put '' around it, otherwise the latter name may be ignored resulting in it being treated as just "droid". That local nonsense is just nonsense I would not waste time with.

    If you REALLY don't care about legacy IE or Safari, you can drop the eot and svg versions. IE10/earlier still expects TTF so I'd include that version too...

    ... and if you have to up-path (../) from your CSS files location, there is something horribly wrong with your directory structure.

    But in any case, if "Visual Studio" is throwing a warning like that, it's just Visual Studio being the same level of Microshaft stupid it's always been. There's a reason I keep telling people you do NOT use Microsoft "development software" for web development. They're one of the few to bone things up even bigger than Adobe does.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

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