[Pro] Google webfonts and valide sites?

Hallo.

Does anyone already has used google webfonts Browse Fonts - Google Fonts
and got valid sites, fine css and reached a wide range of browsers PC and Mac?

I wonder how.

The only way I have found out is to put the markup in after
plus used an extra / at the end”, BUT I am afraid it leaves the css with errors. Browser compatibility seems to be ok.

The browser compatibility is difficult to test because the font is installed at my computer and would be displayed even when my clients cannot see the right font.

The Javascript method which is offered by google too put in the markup after or after does not work either in some browsers.

But maybe it is not the right workaround.

Ideas or workarounds are very welcome.
Thanks a lot in advance!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It might be worth your while looking at the Caxton action Caxton

Easy to implement in FW with no code.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The other thing you could try is to change

link href='http://fonts.googleapis.com/css?family=Questrial|Didact+Gothic' rel='stylesheet' type='text/css'/>

to

<link rel="stylesheet" "http://fonts.googleapis.com/css?family=Questrial|Didact+Gothic">

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Or even

<link rel="stylesheet" type="text/css" "http://fonts.googleapis.com/css?family=Questrial|Didact+Gothic">

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - not quite sue how all those backslashes got in there

<link rel="stylesheet" type="text/css" "http://fonts.googleapis.com/css?family=Questrial|Didact+Gothic">

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you David!

I know caxton, but it is still in beta and I like to use a more reliable method. – Actionsworld says: „Not all browsers will work with this. There will also be differences between font rendering between OSes, and these can cause text to flow differently.“

Google says: The Google Web Fonts API is compatible with the following browsers:

Google Chrome: version 4.249.4+

Mozilla Firefox: version: 3.5+

Apple Safari: version 3.1+

Opera: version 10.5+

Microsoft Internet Explorer: version 6+

They give you the code, and I thought is should be ok :wink: – but maybe the error lies at my side. I will try your suggestions. But actually I am looking for someone who already has used it. Valid, with css ok, displayed in the mentioned browsers.

Thank you again for your answers.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 3 Oct 2011, 10:39 am, sonjanna wrote:

Thank you David!

I know caxton, but it is still in beta and I like to use a more reliable method. – Actionsworld says: „Not all browsers will work with this. There will also be differences between font rendering between OSes, and these can cause text to flow differently."

This will be true of Google’s offering as well. The stark reality is that right now, there are a number of methods that allow you to embed fonts. There are (just to add confusion and headache) a number of varying file formats supported for embedded fonts. If you want to hit as many browsers as you want, you need to offer up a .ttf, a .woff, an .eot, a .svg, and possibly others. The font kits from Font Squirrel target older browsers as well as the more recent ones by offering up a wider selection of files to download. I think Google only supplies the .ttf files - so only more recent browsers will work with them.

I’ll also explain the “There will also be differences between font rendering between OSes, and these can cause text to flow differently” part. This isn‘t down to the files that Caxton supports - this applies to any font - even the so called “web safe” set. Much has been written about how Macs render fonts on screen versus how Window does it. I’ll summarise. Macs render the fonts according to the metrics. This can result in more anti-alisaing, as it is inevitable that horizontals and verticals will cross pixel boundaries. Anti aliasing attempts to cover this up. In contrast, Windows actively re-jigs each glyph so that when it is drawn, horizontals and verticals fall within pixel boundaries. In short - it redesigns the font on the fly. This can result in a sharper looking screen rendering, but at the same time it will distort and damage the look of the font, especially at smaller sizes.

Such differences can affect the way a font falls on a page. It may be that there is negligible difference, but it you take a Mac as the standard, then Windows can affect the width of each glyph and this will eventually cause text to reflow.

Some of the fonts in the “web safe” set are pretty much bullet proof. Trebuchet and Verdana, for example, have been designed to work small on screen, so won’t have redraw and overrun problems in Windows. Fonts which have not had this kind of work done to it are more susceptible to massaging.

Hope this is useful to you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you Paul, I did not like to shorten your action.

I am not generally a Google fan, but I just believed that using Google web fonts is a new and reliable method in easily embedding fonts. (I know there are many other ways, which seemed not stable enough for me.) Their browser compatibility sounded very promising and using seems to be easy.

Optimistic at start - it leaves me a bit resigned :wink:

Perhaps I should leave the css errors, till I test David’s suggestions and more browser tests.

Any other ideas are welcome still


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Paul, I am testing the caxton action with the font “Futura” over the fontkit generator by fontsquirrl and it looks pretty good! Very easy to use. * Thank you David for the origin advice!

Multiple Font Families helped a lot.

Browsertest are more to come though. The page validates, but the css brings some errors. I wonder if I just have to accept this, when I use embedded fonts? Which would be ok, when you “actiondevelopers” say so :wink:

Thank you very, very much as always!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

HI,
By default, the CSS validator at The W3C CSS Validation Service validates against CSS 2.1 by default. That will throw up all kinds of errors in Freeway’s code.

Before validating Freeway’s CSS output, click on the More Options link, and select CSS level 2 in the profile drop-down. Then validate.

Just checked my Actions site’s CSS which uses Caxton, and all is well. What errors are you getting?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 4 Oct 2011, at 09:51, sonjanna wrote:

I wonder if I just have to accept this, when I use embedded fonts? Which would be ok, when you “actiondevelopers” say so :wink:

I found the page validates to CSS3, but if you like to use the W3C’s badge and link, it points to the CSS2.1 page and consequently fails.

For the time being I’ve decided to leave out the CSS pass badge until the W3C sorts themselves out.

Cheers

Heather


Imagic Design * Good Design - No Compromise
email@hidden * http://www.imagic-design.co.uk
T: 01634 864017


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you Heather for your helpful opinion.

Paul, thank you as well for your help.
I wonder where to click on the more Options link, and select CSS level 2 in the profile drop-down?

I use the firefox webdeveloper add on for validation…
Can`t get a clue ;)…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi,
I have often found that in-browser validators either don’t quite cut the mustard, or are limited. I suspect your’s is falling into one of those categories. I have found that sites that fail validation in a browser add-on pass at the W3 site (and, at times, vice versa).

If I want to validate a site, I always go to the online W3 validators.

So, hop on over to this site:
http://jigsaw.w3.org/css-validator/

Follow the instructions in this hastily knocked-up info graphic

and validate your site’s CSS from there. Remember - Freeway’s CSS is level 2, not 2.1 or 3.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Perfekt!
It works very well and validates!
There is always something new to learn. In future I`ll only use this way. Great help!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

*Paul or someone who knows perhaps:

I would love to use the caxton action with a licensed font for a clients webpage.

Just to be sure. The EULA says:

“Embedding of the Font Software into electronic documents or Internet pages is only permitted under the absolute assurance that the recipient cannot use the Font Software to edit or create a new document (read-only). It must be ensured that the Font Software cannot be fully or partially extracted from said documents.”

I don`t know much about the technical backgrounds when embeding fonts. But just liek to be sure.

What do you think? Would it be ok or not to use it?
Thank you as always!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Given the nature of the web and how fonts are stored in a web site, I’d advise not to use it with those conditions in the EULA. Find a version of the font that allows embedding, or a close equivalent.

This is much the same problem as using photos on web sites. People can easily get to the files, and use them for their own means. You put something on a web site, you are effectively giving it away to anyone who comes along.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Paul!

Your are right, indeed. Meanwhile I have spoken to the firm, which offers the font and you can buy the webfont files in adition and case you have already the standard licenses fontfiles. Very expensive though - My clients agrees that we use an easier method with opensource webfonts.

But anyway interesting to know.
Have a nice weekend!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Glad to help, and I’m sure you’ll find an open source font that does the job.

There are some web services that let you rent fonts for use in their web sites. Ones I have just found are Our Font Management Software | Find Your Perfect Solution | Extensis
http://webfonts.fonts.com/en-US

Pricing isn’t too bad depending on use requirements and volume. You don’t host the fonts - they do, but your CSS will be able to load them.

You won’t need Caxton for this as the files are all held in the cloud. You will need to set up a font-set in Freeway for each font you use, using the closest alternative you have on your system for WYSIWYG goodness.

Hope this is of use to you. Maybe one of the site I mentioned has the exact font you need.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options