Based on the google font tutorial i tried to use a webfont that i bought. But i don‘t understand where i have to place the fonts. In the resources area or do i have to upload them to my webspace? The webfont came with four different formats. Which one is the right one?
Thank you.
Hi, didn’t see an option for 3rd party fonts. I’m using Font File stack from archetypon.net, pretty easy to use… works well with foundry.
Thanks for your reply. I think Font Pro from Joe Workman could do this job, but i hoped that i do not need another stack and the “other” button in the Fonts area of the Foundry stack could include this option.
I just recorded a short video for you guys to show one way the custom font field could be used. How you include your fonts in your project will be up to you and the service you use. In this example I use TypeKit from Adobe.
8 Likes
@elixirgraphics
Do I understand this correctly,
- the Foundry site style covers the use of a custom font
- which one can override with custom font of the single text containing element
Header/Paragraph : you cannot override the Site Style font
Page Header : you can override the Site Style font, looks like this is the only element where one can override the Site Style font.
is this correct?
What about font files one can put on the website, selfhosting?
Thanks for your patience, Adam.
Cheers, Igor
the Foundry site style covers the use of a custom font
You can use custom fonts in the base Foundry stack (the Control Center) for the Base Font and the Headers. The Base Font gets applied to most of the page’s elements. The Header font gets applied to headers. There are a few stacks that allow you to change the font like the Page Header, Navigation Bar (for Branding), Navigation Overlay (for Branding).
What about font files one can put on the website, selfhosting?
Self hosting your own fonts would be up to you to do. After doing so you could use the Custom Font field to insert your self-hosted font’s name, like so:
You would be responsible for setting up your font yourself in your project file though. I’d suggest this method only if you’re quite familiar and comfortable doing so.
… and inserting similar loading code as in your fab video, substituting the YourFontName with the actual name of the font and the source url with myowndomain.com, right?
@font-face {
font-family: ‘YourFontName’; /a name to be used later/
src: url(‘http://domain.com/fonts/font.ttf’); /URL to font/
}
Embedding fonts can be a tricky thing and can vary depending on the browser. This is why there are things like Google Fonts out there to make the process simpler. You’re welcome to embed your own fonts in your site but working with that code will be something that you’ll need to do. As I mentioned, I’d only suggest embedding your own fonts if you’re comfortable and familiar with doing so.