Can't get Web Fonts to work in Font Pro


(Iain Mackenzie) #1

OK, so I realise I must be doing something wrong, but I just can’t get Web Fonts to work in Font Pro.
In Font Families, I select a Web Font. I go to settings, give it a Label name and a Family Name.
I watched Joe’s video on this, and he seemed to talk about woff files. Now, none of the fonts on my system seem to have woff files, they are all otf or ttf. So, I selected Advanced from the Font Setup drop down, got the URL from the font in Resources, pasted it in to the normal box, applied the font to Vault 1, applied Vault 1 to my headers and then published the site.
Nothing! The font is just the Fallback font on the site and I can’t see what is wrong.
The font file is uploaded to the correct resources folder on the site.
Any help on this?


(Iain Mackenzie) #2

So, looking at the source code in Safari, it looks like the font cannot be found.
The browser is looking for http://igmack.co.uk/oldstables/index_files/www.igmack.co.uk/oldstables/resources/Calibri.ttf whereas I specified www.igmack.co.uk/oldstables/resources/Calibri in the Web Font settings box.
My path is the correct one, where is this …/index_files/… coming from?


(Iain Mackenzie) #3

I resolved that issue, but can someone tell me why I don’t have any woff files in my fonts folder, just otf and ttf?


(Gon) #4

Where were the wrong path coming from?


(Iain Mackenzie) #5

The whole thing was a bit of a nightmare, so much so that I feel something must be wrong.
The reason it didn’t work as I defined it originally - which was by copying the URL from the Resources section - was because it was/is sensitive to having http:// at the front.
If I add that to the path it works, if I don’t, then I get the result as shown in my post above.
Also, the path is case sensitive, so when I put in http://www.igmack.co.uk/oldstables/resources/FONTNAME (without the extension TTF) as the font file is called FONTNAME.TTF, the site will also fail with an error FONTNAME.ttf cannot be found.
So, I then had to rename the file to FONTNAME.ttf to get it to work.
All very messy, so I am sure I must be doing something wrong as I can’t believe this is the way it should be working.


(Peter Danckwerts) #6

There is at least one disadvantage to inline fonts (they don’t get cached) but they are particularly easy to implement as there is no path to enter.


(Matthias Ficht) #7

Maybe because you didn’t buy them? :wink: They are not automatically generated somehow but have to be bought (or simply downloaded if the font should be free) separately. OTF and TTF are fonts for printing in the first case, WOFF etc. are web-fonts in a special format.


#8

There are lots of websites that allow you to convert to different web font formats for free. Woff covers practically everything but Woff2 is good for the browsers that can handle it. I wouldn’t bother with SVG or EOT. A good site for checking compatibility is http://caniuse.com