Google Fonts and others - embedding if not Google


(Lisa Sandler) #1

Are there any other places I can call fonts from besides Google? or if I bought a font, how would I embed it in my site so all browsers would show it?


(Dave Farrants) #2

This works well for me - https://rapidweavercommunity.com/addons/stacks/font-file - I did buy when it first came out on special offer though.


(Jason Bostick) #3

@PaulRussam has described his process (that seems to make sense to me), where he houses all of his fonts on a sub-domain (fonts.domainname.com) and then uses the warehousing (web font I think is the setting) setting in Header Pro / Paragraph Pro, etc to call the font.


(Paul Russam) #4

I originally got the idea from Andrew (BWD) after I accidentally erased a site’s assets folder in a frenzy of tidying up.
What I now do on bigger sites is create a subdomain called assets and then create a bunch of folders such as fonts, pdfs, staff (for their photos), etc etc
Then all my url’s are something like https://www.assets.mysite.com/pdfs/brochure.pdf
With regard to fonts, I place the required .woff files in the fonts folder and then in FontPro assign them to whatever it is I’m styling, again the url’s would be something like https://www.assets.mysite.com/fonts/firasans-regular.woff


(Lisa Sandler) #5

thanks, Paul. Am I able to do this without getting Font Pro? I’m using Foundation. Right now I’m using Google Fonts. If I put the fonts in my ‘asset’ folder, I can just ‘call’ to them in my header like I do now, with my Google fonts? I do warehouse all my photos, so I have a folder for that already.

The only site I work on is my own, so I’m never going to use more than 2 fonts.


(Paul Russam) #6

@LSPhoto remember you can’t use the fonts that are on your Mac, they have to be eot, tif, woff, woof2. 99% of browsers support woff and that’s the only ones I (and others) bother to place on the server.
As for getting them I’d keep an eye on sites like https://www.designcuts.com for bundle deals. But… you often have to tick a box to add the web fonts into the bundle when you purchase so watch out when/if you buy one.


(Lisa Sandler) #7

Yes, I know. I was thinking of purchasing a web font. For now, I will stick with Google Fonts until I can get the rest of my layout figured out.


(Paul Russam) #8

If you want a really great font to play with that’s free you can’t go wrong with FiraSans, you can get it from here https://github.com/mozilla/Fira
Click the green download button and unzip the resultant file, you’ll find a load of folders in there, out only want the woff and the otf (if you want then on your Mac)
This is FiraSans in action https://www.dma-ni.com


(David) #9

Lisa, you can use custom fonts in Paragraph Pro and Header Pro as well. In the “Font” setting select “Web Font”.

You can convert fonts to woff and other formats online at these sites:

http://www.fontconverter.org/


(Lisa Sandler) #10

Yes. I don’t particularity care about the sans fonts. They’re all pretty similar and easy to find. I’m looking for a modern, yet readable handwritten font for headers. thx


(Lisa Sandler) #11

David
That is interesting! Thank you. I’ll check it out.


(Gary) #12

For web served web fonts, you don’t need FontPro. Save your 2 web fonts to your server and then use the all singing all dancing, BWD HeaderPro and ParagraphPro instead of the Foundation Header and Paragraph stacks. In the stack setting in the Font settings, choose Web font and then point to the location of the web font. You only have to do this once and I would be surprised if there was not a really well laid out set of instructions on the BWD site.


(Lisa Sandler) #13

Yes, Gary, that is what I am currently doing with Google Fonts. Using Header and Paragraph Pro :slight_smile:


(Gary) #14

Using Google Fonts in HeaderPro and ParagraphPro is pretty much the same as using the Foundation font settings. The real magic starts when you access the Web Font setting in the BWD Pro stacks:)