Viewing Custom fonts
Custom fonts
|
User: Kevin G. 12 years ago
|
|
|
Hi, How do I add custom fonts to my website so other will see the fonts I see when I build. Thanks. |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Here are two methods Google Fonts in Everweb Custom Fonts in EverWeb Last edit 12 years ago ------------------------------- Paul EverWeb Developer |
|
|
✔ Best Answer
|
|
|
User: Roddy 12 years ago
|
|
|
While Google does host a large number of fonts, the list is by no means exhaustive and there can be a time lag when the fonts load on slow internet connections. This can be noticeable if the font is used in the header. For those who are publishing to a hosting service other than the EverWeb one, it is a lot quicker, simpler and more efficient to upload non web safe fonts to the server. That way you don't have to worry about different formats and browser support since it's just a question of referencing the stylesheet which is included along with the fonts in the various formats. See this page for more info… http://everwebcodebox.com/layout/fonts.html ------------------------------- 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
|
|
|
You're aware that "EW custom" fonts don't work with iOS? S Quote: Paul-RAGESW - 05/12/2013 13:00:42 ------------------------------- MacBook Pro 15in Retina 10.14.6 Nevada, U.S.A Apple since OS 7.1 LE II (pizza box) |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Quote: You're aware that "EW custom" fonts don't work with iOS? I have found that some fonts to do work, and some don't. I'm not sure why at the moment or which fonts will/won't work. Please understand that this isn't a issue with EverWeb. The way to add fonts to a web site is done through HTML code that you are entering in the Head Code field. If some browsers support it, but others don't, it's a problem with the web browser not having certain features. Custom fonts is a newer CSS/HTML feature so not all browsers support it yet, though most modern ones do. ------------------------------- Paul EverWeb Developer |
|
|
User: Steve 12 years ago
|
|
|
Ok, good to know... I've tried viewing them on iOS 6 & 7 and Chrome which are reasonably modern. I'll have to test on PC and Android. Either way we can't use them if they don't work across the board.. S Quote: Paul-RAGESW - 07/12/2013 13:10:35 Quote:
You're aware that "EW custom" fonts don't work with iOS? I have found that some fonts to do work, and some don't. I'm not sure why at the moment or which fonts will/won't work. Please understand that this isn't a issue with EverWeb. The way to add fonts to a web site is done through HTML code that you are entering in the Head Code field. If some browsers support it, but others don't, it's a problem with the web browser not having certain features. Custom fonts is a newer CSS/HTML feature so not all browsers support it yet, though most modern ones do. Last edit 12 years ago ------------------------------- 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
|
|
|
@ Steve Custom fonts will work on devices running iOS. They just won't work using the method described in the allaboutiweb.com website. The article refers to the .ttf format which is only part of the story. I assume the author was trying to simplify the process of adding the font and uploading it to the EW Server since it is not possible to upload folders. Unfortunately this simplistic approach doesn't work since you really need to include .eot, .svg and .woff as well to cover all the bases. You would need to drag all four into EverWebs Assets and reference them all in the styles. The SVG format is the one required for mobile Safari. If you want to use more than one or two fonts it would be more sensible to create a separate stylesheet and reference it in the head code. If you are publishing to another server it is a lot quicker and simpler to upload the folder with the various file types and reference the stylesheet. As Paul has pointed out, this has nothing to do with EverWeb. It's just that the article you read is not giving the full story - yet. Part 3 is due to cover Internet Explorer and perhaps this may also include info for mobile Safari. WOFF is now supported in IE 9 & 10 so the need for EOT is beginning to fade in importance. ------------------------------- 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
|
|
|
Roddy Thanks for the info... Too bad it's not that easy. So I would assume that the reason Google Fonts works so well is that they have all of those files covered... I'm uploading to my own server, so I thought the page would call for the fonts in the External Assets folder on my server and work. Sounds like there's more to it then that... Thx Steve Quote: Roddy - 07/12/2013 15:24:20 @ Steve
Custom fonts will work on devices running iOS. They just won't work using the method described in the allaboutiweb.com website. The article refers to the .ttf format which is only part of the story. I assume the author was trying to simplify the process of adding the font and uploading it to the EW Server since it is not possible to upload folders. Unfortunately this simplistic approach doesn't work since you really need to include .eot, .svg and .woff as well to cover all the bases. You would need to drag all four into EverWebs Assets and reference them all in the styles. The SVG format is the one required for mobile Safari. If you want to use more than one or two fonts it would be more sensible to create a separate stylesheet and reference it in the head code. If you are publishing to another server it is a lot quicker and simpler to upload the folder with the various file types and reference the stylesheet. As Paul has pointed out, this has nothing to do with EverWeb. It's just that the article you read is not giving the full story - yet. Part 3 is due to cover Internet Explorer and perhaps this may also include info for mobile Safari. WOFF is now supported in IE 9 & 10 so the need for EOT is beginning to fade in importance. ------------------------------- 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
|
|
|
Since you are uploading to another server the solution is straight forward. Just forget about the EverWeb assets folder and create your own "fonts" folder. Upload this to the root folder on the server. Anytime you want to add a font, upload it to this folder in its own folder with a suitable name. When you download a font from somewhere like Font Squirrel, you will get a folder with all the different file formats and a stylesheet. As I pointed out before, it's just a question of referencing the stylesheet in the page or site wide head code like this… <link rel="stylesheet" href="htp://www.domain-name.com/font-folder/font-name/stylesheet.css" type="text/css" charset="utf-8"> If the font is uploaded to your own server, you can of course use relative paths to the stylesheet. This would be worth considering if you have a whole bunch of custom fonts. I assume the allaboutiweb.com article was intended as a workaround for those publishing to the EverWeb server. Even if it did work, it's not a very eloquent solution since it is over complicating a simple task. My explanation consisted of two sentences and a line of code. It seems I need to expand on this somewhat! ------------------------------- 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
|
|
|
I tried this... <link rel="stylesheet" href="htp://www.sitename.com/allietwo/font-folder/ADELE-light.ttf/stylesheet.css" type="text/css" charset="utf-8"> And it won't work... S Last edit 12 years ago ------------------------------- 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
|
|
|
What did you try?
------------------------------- 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
|
|
|
Couldn't post it here had to send it to you directly... S <link rel="stylesheet" href="http://www.sitename.com/allietwo/font-folder/ADELE-Light.ttf/stylesheet.css" type="text/css" charset="utf-8"> Quote: Roddy - 09/12/2013 16:28:21 What did you try?
Last edit 12 years ago ------------------------------- 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 can't post code in the forum at the moment. You need to replace the back/forward arrows with the appropriate HTML attribute to get it to work. I have replied to your email. The problem is with the actual URL to the stylesheet. It is a good idea to test absolute file paths like this in the browser to make sure they work before pasting them into code. ------------------------------- 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. |