Viewing Slightly thicker fonts once published
Slightly thicker fonts once published
|
User: jefflopezdesigns 12 years ago
|
|
|
In Everweb the font seems very crisp, once published in the browser slightly thicker. Is this something I'll just have to get used to or is there a fix for this? Is Everweb's view actually thinner and the browser view is what the font should look like? Or vice versa? It's very subtle but just enough to make a difference in the style I'm trying to achieve. I've attached two examples. PS Also if it makes any difference it's a Google Font (Fjalla One) (Regular). Thanks! Last edit 12 years ago |
|
 Screenshot 2014-04-05 13.20.47.png Everweb view  Screenshot 2014-04-05 13.21.44.png Browser view |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
What's your website URL. That looks like a big difference so I'd like to take a look.
------------------------------- Paul EverWeb Developer |
|
|
User: jefflopezdesigns 12 years ago
|
|
|
Quote: Paul-RAGESW - 05/04/2014 14:42:24 What's your website URL. That looks like a big difference so I'd like to take a look. http://www.calvarypueblo.com/new/index.html Thanks! |
|
|
User: jefflopezdesigns 12 years ago
|
|
|
I noticed something else, I can post a screenshot once I get home, but I'll post the link. It doesn't look like the difference in typeface is being recognized. On this page (font Oswald) the names are a "Regular" typeface and the description underneath is suppose to be a "Light" typeface. However, it all shows in "Regular". Same happens in the bio pages. Page: http://www.calvarypueblo.com/new/volunteers.html |
|
|
User: jefflopezdesigns 12 years ago
|
|
| I'll add, on a computer with the font installed it shows up fine. | |
|
User: jefflopezdesigns 12 years ago
|
|
Everweb view Browser view 
|
|
|
User: jefflopezdesigns 12 years ago
|
|
|
Everweb view Browser view
|
|
|
User: jefflopezdesigns 12 years ago
|
|
|
Everweb view Browser view
|
|
|
User: Roddy 12 years ago
|
|
|
Quote: On this page (font Oswald) the names are a "Regular" typeface and the description underneath is suppose to be a "Light" typeface. However, it all shows in "Regular". The font will look thicker because the browser is loading the regular font with a weight of 400. In the stylesheet you have this… font-family: 'Oswald-Light','Oswald'; … which means that the preferred font is Oswald-Light and the fallback is Oswald regular. The @font-face styles show this for Oswald... @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/qpy-UiLNKP-VfOdbcs6r6-vvDin1pK8aKteLpeZ5c0A.woff) format('woff'); } … which means that there is no light version available so, if the computer the page is viewed on doesn't have the light version, the browser will revert to the regular one the Google server. Google hosted fonts are not the answer if you want to use more than one or two - even Google will tell you that! To use non web safe fonts the way you are you really need to self host them. Also, when you use a non web safe font, you need to specify a fallback from the web safe group which will replace your chosen font without disrupting your layout and also the generic group… font-family: 'Oswald-Light','Oswald', helvetica, sans-serif; ------------------------------- 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: Jumbo T. 12 years ago
|
|
|
When you download the Oswald font, it contains the Light 300, Regular 400 and Bold 700 version. https://www.google.com/fonts#UsePlace:use/Collection:Oswald When you select the styles you want to use in part 1, it creates a link to the font in part 3 : <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'> After installing the fonts and then using the font in Everweb, EW create the wrong link to the font (link shows the other fonts use in the page) : <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Fjalla+One|Lato|Oswald|Molengo"> Notice that 400 and 300 are missing. The light version is never used. After adding the numbers, the text displays correctly. The images show the order how I changed the code in Safari Inspector :    So EW creates the wrong attributes in the link to Google. @Roddy The code you referred to is from Safari's internal CSS style and for internal use only. It is not user created. @jefflopezdesigns You linked to the dropbox page with the image. You should link to the image itself : 
|
|
|
User: jefflopezdesigns 12 years ago
|
|
| Thanks so much @Jumbo T! Much appreciated! | |
|
User: jefflopezdesigns 12 years ago
|
|
|
[quote name=Jumbo T. time=06/04/2014 16:39:16] <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'> After installing the fonts and then using the font in Everweb, EW create the wrong link to the font (link shows the other fonts use in the page) : <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Fjalla+One|Lato|Oswald|Molengo"> Notice that 400 and 300 are missing. I added <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'> to the page and it works perfectly! Hopefully they fix the issue so people don't have this problem in the future. But for now, you sir are a lifesaver. Thanks a million! |
|
| Post Reply |
| You must login or signup to post. |