Viewing How do I add self-hosted webfonts ?
How do I add self-hosted webfonts ?
|
User: Peter B. 12 years ago
|
|
|
Hi I have created a web font from an existing TTF font. I want to use the webfont so I am sure that what get's seen online is the same as I design it. The font is not in the google font list, so I cannot use that. I can upload the font to my webserver, put it in a folder and place the accompanying CSS file with it. This may work for the online version, but I don't see how this will work in EverWeb. I assume EverWeb needs to have access to the fonts as well for it to be able to use ( reference ) the font to be used ? So I guess I need to also add the font to my OS ? But how ? Last edit 12 years ago |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Double click the font in the Finder and it should ask if you want it to install it on your computer. This article on custom fonts in EverWeb, may provide some more detail for you. ------------------------------- Paul EverWeb Developer |
|
|
User: Peter B. 12 years ago
|
|
|
Quote: Paul-RAGESW - 24/04/2014 6:18:11 Double click the font in the Finder and it should ask if you want it to install it on your computer. This article on custom fonts in EverWeb, may provide some more detail for you. Paul, thanks for the reply. The link you showed me made things more understandable indeed. It states I have to add the TTF version to the assets. Shouldn't that be the .EOT .SVG and .WOF files ? And...the font is referenced in EverWeb as being "Fontname" while in the external css that comes with it it is named " Fontnameregular" for example. So how do I get EW to reference it by the new familyname "Fontnameregular" ? Last edit 12 years ago |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Quote: It states I have to add the TTF version to the assets. Shouldn't that be the .EOT .SVG and .WOF files ? If you had all those versions than yes you should add them too. I think you only need TTF, EOT, and WOF files to provide full support across all browsers. I'm very sorry but I cannot provide direct support for third party tutorials. When we build in support for custom fonts I can provide more concrete details. If you want it to reference by the family name, I think you need to look in the Fonts folder on your computer and get the exact name of the font. However, if you just set things like; font-weight:bold; font-style:italic; to the CSS tag, you can modify the font styling. ------------------------------- Paul EverWeb Developer |
|
|
User: Peter B. 12 years ago
|
|
|
Quote: Paul-RAGESW - 24/04/2014 6:58:24 Quote: It states I have to add the TTF version to the assets. Shouldn't that be the .EOT .SVG and .WOF files ? If you had all those versions than yes you should add them too. I think you only need TTF, EOT, and WOF files to provide full support across all browsers. I'm very sorry but I cannot provide direct support for third party tutorials. When we build in support for custom fonts I can provide more concrete details. If you want it to reference by the family name, I think you need to look in the Fonts folder on your computer and get the exact name of the font. However, if you just set things like; font-weight:bold; font-style:italic; to the CSS tag, you can modify the font styling. Paul, Thanks for the info. I just found that EW cannot cope with these at all. Regardless if it's a TTF, EOT or WOF. The files are added to the Asset section of the program as instructed. The program however does NOT copy any of them to the final website. It plain ignores them. The folder " ewExternalFiles", where they should be located, contains only image files and the CSS file I added for these webfonts. The fonts themselves are not copied over to the site. |
|
|
User: Roddy 12 years ago
|
|
|
The article in All About iWeb is not relevant if you can upload your own fonts folder to the server. It also doesn't tell the whole story. To install the font on your Mac to use it in EverWeb all you need is the TTF file. To make sure it works in all browsers, upload all the different formats - along with the stylesheet - in the same folder and reference the stylesheet in the head code of any page you want too use it on like this… <link rel="stylesheet" href="htp://www.domain-name.com/font-folder/font-name/stylesheet.css" type="text/css" charset="utf-8" /> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Steve 12 years ago
|
|
|
Hey Peter I was all happy when I read that article too, but I could never get it to work so I use Google fonts for now... S ------------------------------- MacBook Pro 15in Retina 10.14.6 Nevada, U.S.A Apple since OS 7.1 LE II (pizza box) |
|
|
User: Steve 12 years ago
|
|
|
You mean "http"? S Quote: Roddy - 24/04/2014 9:18:27 The article in All About iWeb is not relevant if you can upload your own fonts folder to the server. It also doesn't tell the whole story.
To install the font on your Mac to use it in EverWeb all you need is the TTF file. To make sure it works in all browsers, upload all the different formats - along with the stylesheet - in the same folder and reference the stylesheet in the head code of any page you want too use it on like this… <link rel="stylesheet" href="htp://www.domain-name.com/font-folder/font-name/stylesheet.css" type="text/css" charset="utf-8" /> ------------------------------- MacBook Pro 15in Retina 10.14.6 Nevada, U.S.A Apple since OS 7.1 LE II (pizza box) |
|
|
User: Roddy 12 years ago
|
|
|
You're quite right. It should have been… <link rel="stylesheet" href="http://www.domain-name.com/font-folder/font-name/stylesheet.css" type="text/css" charset="utf-8" /> Actually, when you use self hosted fonts, it's better to use a relative path since this reduces server requests. One of the problems with Google fonts is having to load them from the Google server which is why you should keep them to a minimum or not use them at all - especially on the mobile version of a website. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Quote: The program however does NOT copy any of them to the final website. It plain ignores them. If you haven't referenced them in the header code field in EverWeb they won't get published. Only external files actually being used will be published. ------------------------------- Paul EverWeb Developer |
|
|
User: Linda S. 11 years ago
|
|
| Hi! Have been working on this for months, critical to getting clients migrated to EW. Substituting fonts changes look of sites. Forgetting that they always work on my Mac has slowed progress. Just tried Roddy's method above, but still no results. Using a few Google Fonts for now, but need this to work. If EW isn't there yet, can you please provide directional statement. This is critical to designing. (If you want to see poor substitutes check out siegelphotography.com, or Domo-7.com (had to drop Insignia font all over this site). I do love and recommend EW, but this is huge for those of us who use EW for client sites. Thanks Mucho! | |
|
User: Jumbo T. 11 years ago
|
|
|
The link to the font on your home page points to : src: url('file://localhost/Users/Linda/Library/Application%20Support/EverWeb/0BA33DB4D57E49E2A2707C2B7D98FB23.everweb/Assets/External%20Files/ImprintMT.ttf'); Look at the source of the page. If you design websites for a living, you should be able to figure that out. |
|
|
User: Linda S. 11 years ago
|
|
| And do you see ImprintMT used on my page SERVICES if you do not have it loaded on your computer? Thanks for the snarky reply. | |
|
User: Patrick C. 11 years ago
|
|
|
This article doesn't actually have the code that you need to copy and paste. Could you supply it please? Thanks, Patrick Quote: Paul-RAGESW - 24/04/2014 6:18:11 Double click the font in the Finder and it should ask if you want it to install it on your computer.
This article on custom fonts in EverWeb, may provide some more detail for you. |
|
|
User: Roddy 11 years ago
|
|
|
See THIS topic for info about hosted fonts and a link to a page with instructions.
Last edit 11 years ago ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |