[Pro] webfonts implementation (myfonts.com)

I’m trying to implement server web fontsets purchased from myfonts.com.
I’ve generated the font kit which includes a statement to be added in (HTML Markup element).
see below

The CSS file includes is defining the font-face.

i would assume that the styles, links, … have to be implemented with the action “ESS Convert to style sheet”. How do I have to replace the standard styles in freeway?

Any thoughts or an example wich I could reuse.

BR,
Stefan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

i would assume that the styles, links, … have to be implemented with the action “ESS Convert to style sheet”. How do I have to replace the standard styles in freeway?

No.

After you have included the link to the stylesheet in the head of your page then all you need to do in FW is to create a style/styles that include the font information as is defined in the webfont stylesheet ie font-family:‘TradeGothicLT-BoldCondTwenty’

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello David,
thanks for t he fast response-

I’m still failing.

The path to the CSS-file is correct (genussguerilla: Error Page)

In freeway I’ve added the link “link rel=“stylesheet” type=“text/css” href=“genussguerilla: Error Page”” in the section

while opening the webpage (genussguerilla: Error Page) I get the link displayed on the top of the page.

Any ideas?

BR,
Stefan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

you have to wrap this in a link TAG just like:

<link rel=stylesheet type="text/css" href="http://www.genussguerilla.de/estate_template/webfonts1/Trade_Gothic_Bold_Condensed_No_20.css">

to get this running. I expect this knowledge honestly from someone that dips his toes into the cold-code-water (and this is something to find out via google and some other resources such as theLounge and even some of the free episodes)

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

another note perhaps:

A pretty near font to your purchased one is:

So often enough no need for spending your hard earned coins.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

and allow me another note:

Will caxton-action be of help? I’ve never used it but it handles lot’s of different formats as far as I’m oriented.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hello Thomas,
the link TAG is already part of the header

link rel=“stylesheet” type=“text/css” href=“genussguerilla: Error Page

BR,
Stefan


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Are you kidding?

Cheers

Thomas

Look CAREFULLY at the way my provided link looks like!!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Are you kidding?

What my friend Thomas here means is that the business of writing code is a matter of precision. Although browsers are programmed to guess what you mean, it is better to follow the rules and make sure what you mean.

<link rel="stylesheet" type="text/css" href="http://www.genussguerilla.de/estate_template/webfonts1/Trade_Gothic_Bold_Condensed_No_20.css">

First, you get the browser’s attention by isolating your instruction with opening and closing carets like thus

<>

And that is a line of code. Or, at least, where it will be. Beginning with the left caret and ending with the right caret. In other uses, requiring a slash before the final caret, but not in this use. Next, we tell the the browser what type of resource this is:

<link>

However, we must add attributes to the link command to tell the browser where to find the resource and how to use it. Attributes follow a familiar format–

attribute-name="attribute-value"

with the value in quotes and connected to the name with the equal symbol. For this link we use the rel attribute to tel the browser that this resource is used as a stylesheet, the type attribute to tell it that it is read as css code in text format, and finally the href attribute to tell the browser where to find it. Put it all-together and you get the properly constructed instruction for the browser to use the resource:

<
link 
rel="stylesheet" 
type="text/css" 
href="http://www.genussguerilla.de/estate_template/webfonts1/Trade_Gothic_Bold_Condensed_No_20.css"
>

There are other rules which, originally, brought me here to comment. As an email notification, the href url appeared to me to have spaces-- which is usually a coding no-no. Often you have to convert spaces to their code equivalent-- %20– to make the browser understand. However, they are actually underscores which were hidden in my email by an active link underscore on the entire url, so that is all fine and good and no need for me to say anything at all except of course, best of luck.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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:

http://genussguerilla.de//webfonts1/

Sorry - an extra / got in there by mistake

Should be

http://genussguerilla.de/webfonts1/

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

First of all thank you to all of you for your support.
BR.
Stefan

It’s now working with the following solutions:

1.) with the action CAXTON (also with more than one font on the page, all font-sets in one folder)

2.) with the link in the and the css file (css file is anyway the same for both solutions)

I’m using 1 +2 for commercial fonts. For free fonts I’m still using with the action WEBFONT

Pro
solution 2: has to be applied only once to the site folder

Con
solution 1: has to be applied for each page


freewaytalk mailing list
email@hidden
Update your subscriptions at: