font display issues

bici · 2017-03-23 07:01:33

I downloaded a template and i am adopting it for my textpattern site. There is an annoying problem that i cannot track down.

If i view the webpage by loading the index.html file the text on the page is dark and bold.
But having loaded the page into Txp the font is lighter and less bold.
I checked and all paths to do with Fonts and the CSS are all fine.

With Firefox when checking the css Style Information it shows the exact same css settings for both versions.

the original had :

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:400,700,300">
<link rel="stylesheet" href="css/style.css">

the url to the google font didn’t look right so i changed to an actual path
on my txp i have:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:400,700,300">
    <link rel="stylesheet" href="/assets/css/style.css">

Somehow the two fonts are not the same…

Anyone have any ideas why this is happening?

phiw13 · 2017-03-23 08:16:00

bici wrote #304986:

If i view the webpage by loading the index.html file the text on the page is dark and bold.
But having loaded the page into Txp the font is lighter and less bold.
I checked and all paths to do with Fonts and the CSS are all fine.

A bit hard to debug without seeing an actual webpage. Do the font-names + font-weight match exactly between the two stylesheets? Is there anything up in the cascade that might affect the font-weight choice?

jakob · 2017-03-23 08:40:24

You can check whether the font files have loaded properly by looking in the Network tab of the firefox inspector. If the file doesn’t load correctly, maybe firefox is falling back to using a font already installed on your computer (which might be different or not have all weights).

Also, if you highlight the text in question in the dev tools inspector (using the arrow/target tool) and then switch to the computed tab in the styles sidebar, it will show you the styles that apply for that specific element. You can then compare what’s different.

If the weight difference is only very slight, maybe there’s some font smoothing in effect in one of the stylesheets. Finally, along the same lines, sometimes some javascript / opacity manipulation elsewhere on a page can cause font-rendering to change momentarily.

philwareham · 2017-03-23 11:05:24

bici wrote #304986:

the url to the google font didn’t look right so i changed to an actual path
on my txp i have…

Regarding the URL, the original path was fine it just excluded the protocol so the code can be safely used with either HTTP to HTTPS without any mixed content error. FWIW just use HTTPS anyway for the protocol as Google Fonts can accept either.

bici · 2017-03-23 17:20:25

thanks all! i see now where the problem is. it was the DEMO version that was not getting the correct css style sheet and was defaulting to something else.

But also using Firefox developer tools i found over 100 errors do with the css:

Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped.  style.css:6894:10
Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped.  style.css:6902:10
Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped.  style.css:6984:10
Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped.  style.css:6989:10
Unknown property ‘line-break’.  Declaration dropped.  style.css:7085:12

shoddy product!

phiw13 · 2017-03-23 22:33:49

bici wrote #305005:

thanks all! i see now where the problem is. it was the DEMO version that was not getting the correct css style sheet and was defaulting to something else.

Great!

But also using Firefox developer tools i found over 100 errors do with the css:

Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped. style.css:6894:10...

shoddy product!

I guess the stylesheet includes references to the old, pre IE10 alpha() filter (substitute for the opacity CSS property)? Firefox, or any other modern browser, doesn’t understand that, and is kind enough to flag it in the console. Safari does the same, btw. Ditto, sort of, for the linebreak property (there is a spec for that, but only Edge and Safari 10.1 implement it, partially, AFAIK).

philwareham · 2017-03-24 09:34:26

I think it’s pretty safe to strip all the IE proprietary filter: rules out of your CSS now, since usage numbers for IE<10 are low these days.

Textpattern CMS

Textpattern CMS support forum

#1 2017-03-23 07:01:33