Hello.
I have a site living inside a domain firewall for an institute where group policy prohibits font downloads from external sources on Windows. Font Awesome for Stacks works nicely still, as the Foundry HTML preferences are set to keep them (and jQuery) local. I am using the default, unmodified Foundry Theme.
How can I best convert the (Google) fonts (ex. Lato for the default Foundry headers) to “embedded”, so that the relevant content displays the same where the policy interferes with external font downloads?
I have read threads here, though none with complete directions, and so if this is something I need to seek support for elsewhere, can you please point me in the right direction?
Can - perhaps - 3rd party stacks take care of this reliably?
Thank You,
András
You can use BWD’s ParagraphPro and HeaderPro to use fonts served form your server. Download Lato from Google Fonts or directly from the Lato web site (because it is a better newer version), and serve locally. Alternatively, you could use inStacks Font stack or JW’s FontPro.
Thank You - I will look at those . . . .
Download Lato from Google Fonts or directly from the Lato web site
You can do something similar to what @webdeersign suggests by downloading the fonts and setting them up yourself on your server, and then use the Other setting to insert your font name:
@elixirgraphics Is there some documentation to show how to do this?
E.g. if you have a folder of web fonts called demofont containing demofont.woff, demofont.eot, demofont.svg & demofont.ttf, where exactly should that folder be placed? Also do you then add “demofont” into the Custom Font box and select Other?
Well, I installed the font on the web server (Win2008r2) and made sure that all four file types have proper MIME types associated with them in the server configuration. I think that will do it. That is, once the pages are published on the server.
I guess I need to install them on the local (authoring) machine as well, to make them show up in preview?
I only kinda understand this :^/
@webdeersign No, that isn’t something I offer a tutorial or support for.
Thanks.
So if I understand this correctly, if you select “A other”, the name used in the Custom Font box is used for the name used for the font-family and nothing more.
I assume it is up to the user to define the font using @font-face or otherwise?
You would need to define your own @font-face CSS, yes. The ‘Other’ option is there mainly for web safe fonts like Arial, or Georgia, or whatnot, but can be used for things like setting up your own @font-face embeds, if that is something you have the skill to do.
I have this working perfectly now. Thank you for nudging me in the right direction.
Found https://www.fontsquirrel.com to be a fantastic resource. It will generate .woff files and (not unlike the Google API) the relevant .css to be included in one’s project.
I simply collect the fonts needed for my pages in a folder, add that folder to the Rapidweaver project’s Resources and modify (find/replace) the above generated .css font references to the proper (relative) directory containing the fonts.
All pages look perfect now in IE as well.
4 Likes
Good. This is a big feature hidden away in Foundry.