[Pro] webfonts implementation (myfonts.com)

Freeway
10

OK - here is a brief breakdown of how this works if you are hosting the fonts yourself.

Include the link to the stylesheet in Before 

<link rel="stylesheet" type="text/css" media="all" href="Resources/notosans-styles.css">

And in that stylesheet you have just linked to you have to be very careful that you include the correct paths to the linked font files

@font-face {
    font-family: 'noto_sansbold';
    src: url('http://www.deltadesign.co/_Fonts/notosans/NotoSans-Bold-webfont.eot');
    src: url('http://www.deltadesign.co/_Fonts/notosans/NotoSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.deltadesign.co/_Fonts/notosans/NotoSans-Bold-webfont.woff') format('woff'),
         url('http://www.deltadesign.co/_Fonts/notosans/NotoSans-Bold-webfont.ttf') format('truetype'),
         url('http://www.deltadesign.co/_Fonts/notosans/NotoSans-Bold-webfont.svg#noto_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

If you compare that to what you have in your stylesheet you will see that the paths to your font files are incorrect.

@font-face {
    font-family: 'TradeGothicLT-BoldCondTwenty';
    src: http://genussguerilla.de('/estate_template/webfonts1/2EDE88_0_0.eot');
    src: http://genussguerilla.de('/estate_template/webfonts1/2EDE88_0_0.eot?#iefix') format('embedded-opentype'),
        http://genussguerilla.de('/estate_template/webfonts1/2EDE88_0_0.woff2') format('woff2'),
      http://genussguerilla.de('/estate_template/webfonts1/2EDE88_0_0.woff') format('woff'),
       http://genussguerilla.de('/estate_template/webfonts1/2EDE88_0_0.ttf') format('truetype');
}

Take this path for example

src: http://genussguerilla.de('/estate_template/webfonts1/2EDE88_0_0.eot')

This should actually be

 src: url('http://genussguerilla.de/estate_template/webfonts1/2EDE88_0_0.eot')

But my personal preference would be to store all my font files in a folder at the root of your site ie at

http://genussguerilla.de//webfonts1/

So the path would be

http://genussguerilla.de/webfonts1/2EDE88_0_0.eot

David

freewaytalk mailing list
email@hidden
Update your subscriptions at: