CSS file not loading / displaying in Firefox - html

I'm creating a small one page website ..for the first time in quite a while.
It works fine on chrome & safari across desktop, tablet & phone but on Firefox (v20 for mac os) the CSS does not load (locally or online).
I have done some research & have checked / amended the following:
the encoding is "utf-8"
no difference / change when using absolute paths over relative.
path is correct, right down to the case sensitive name of the css file.
link type is specified (text/css)
cache has been cleared.. alot..
.. but still no luck, below is the line of code linking to the css & it is also live on http://www.louisetiernan.com
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
All help very much appreciated. Thanks.

You have typos in your CSS. Everything beyond the first typo is not executed:
What you have:
#font-face {
font-family: 'chaparral';
src: url('fonts/chaparralprosemibold.eot); /* IE9 Compat Modes */
}
#font-face {
font-family: 'chaparralr';
src: url('fonts/chaparralproegular.eot); /* IE9 Compat Modes */
}
Add the ' just before the )
#font-face {
font-family: 'chaparral';
src: url('fonts/chaparralprosemibold.eot'); /* IE9 Compat Modes */
}
#font-face {
font-family: 'chaparralr';
src: url('fonts/chaparralproegular.eot'); /* IE9 Compat Modes */
}
You forgot 2 instances of the closing ' in the url arguments.

Viewing the interpreted CSS in firebug, it appears that FF is having trouble with your #font-face declarations. Try removing them from styles.css to diagnose the problem. It's possible the interpreter doesn't like multiple src properties, or perhaps it is choking on the comments (although everything looks good to me [and Chrome and Safari...]).

I believe there are a number of errors in your CSS file which cause it not to be rendered correctly on the page. Please go to the following web site and validate your CSS code (paste it all right in there):
http://jigsaw.w3.org/css-validator/#validate_by_input
When I entered your css there 5 errors were located. Go through and fix each error and the css should show up and start working.

I believe the culprit is your / at the end of your tag.
Should look like this:
...type="text/css" href="styles.css">

Related

Long loadtimes with MyFontsWebfontsKit.css

Has anyone used MyFonts.com to use webfonts?
I bought one to use on a new site and the css file they ask me to include seems to add massive wait times on pageload.
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/*");
#font-face {font-family: 'Trenda-Black';src:
url('webfonts/*.eot');src: url('webfonts/*.eot?#iefix')
format('embedded-opentype'),url('webfonts/*.woff2')
format('woff2'),url('webfonts/*.woff')
format('woff'),url('webfonts/*.ttf') format('truetype');}
That is the css file they tell me to attach to my html's head, which I did here:
<head>
<link rel="stylesheet" href="MyFontsWebfontsKit.css">
</head>
I'm having to wait 16 seconds for the page to load where it normally takes less than one (site is on my hard drive only atm). The fonts do work though.
Does anyone know a solution?
I heard #import is not good to use, is that why? The css comment instructs me not to remove it.

CSS formatting showing in IE but not Chrome or Firefox

This one is stumping me, as I've searched and searched through similar issue topic threads on this site but none of them are helping me resolve the issue.
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<link rel="stylesheet" type="text/css" href="./main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
and the below CSS file code in my main.css file in the same directory as my HTML file (C:\HTML)
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
The text formatting works correctly when I open the code in IE, but not in Chrome or Firefox, what might I be missing about these two browsers that could be causing the issue?
Presentation (css) can appear different in different web browsers because each web browser has their own default and user configurable settings. You will always see differences between browsers because of differences in the default settings. eg. In the screen shot below using your sample code you can see that on my computer IE and other browsers display the page 'more or less' the same.
To make browsers display the same web pages 'more or less the same' you need to configure each of them with the same default settings for presentation (fonts, font sizes, color, background colors etc)
To debug rendering differences between browsers you need to use the DOM Explorer tab of the Dev tool in each browser(screen shot above) and compare the applied rules.
To help you further we would really need a screen shot from your computer, showing the browsers side by side. As you can see by the screen shot on my computer different browsers display the page 'more or less the same'. That's because I have configure all of my test browsers with the same user settings for presentation/accessibility (text size, zoom, color, background-color, font family, link and hover color etc).
The best way to test between browsers is to use https://www.browserstack.com/ because you are using virtual instances of vendors' browsers that have the 'factory' default settings. Comparing browsers on your own computer you should expect that the best result is that they will display the same web page "more or less the same", but not exactly the same.
To debug presentation, you need to use the DOM Explorer tab of your browsers dev tool.
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
</style>
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
This also stumped me for a long time - Page looks okay in Edge\IE11 but not Chrome or Firefox. Eventually found there was nothing wrong with the HTML or CSS syntax. The fix was simple. The HTML file was encoded in UTF-16. I overwrote the file saving it as UTF-8. It now works fine in all four browsers.

iOS 8,9 font-weight on body element causes html entity ‑ to disappear (non breaking hyphen)

I am using iOS (multiple versions) and when using the html entity ‑ with a font-weight value on the body tag I have the following results:
iOS 9.0.1 (doesn't render entity)
iOS 9.0 (doesn't render entity)
iOS 8.4 (shows odd character below):
Code to reproduce:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<style>
body
{
font-weight: 300;
}
</style>
</head>
<body>
<span>‑$7.00</span>
</body>
</html>
If I remove font-weight it works as expected in all iOS versions. Is this a bug? This bug does NOT happen on Safari for mac
URL to try:
http://chrismuench.com/ios_9_font_bug.html
Try using – as I have not seen ‑ used previously.
I have tested – on both my IOS devices and the IOS Simulator and both work.
For a full list of html safe characters please see This site
It appears font-weight for certain fonts can only be 400 or 700 as described here:
https://css-tricks.com/almanac/properties/f/font-weight/
Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700. So the same demo displayed with one of those fonts would display only two weights in the nine paragraphs.

How to correctly use Ubuntu font

I tried to use the Ubuntu font in my page by adding a link:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Here is the CSS:
body{
font-family : Ubuntu;
}
It works but sometimes the font can't recognize slovak characters like "č, ž". These are a different font (not Ubuntu). For example in a mobile sized screen (when I push ctrl+shift+m in firefox = mobile view).
Do you know what the problem is?
I don't know about the slovak font showing it correctly. Maybe you need to add latin-ext (You need to check the latin-ext to see if it supports Slovak characters. But if you are getting wrong characters on different browsers, it is because you didn't explicitly set the charset. Add the following line to the header:
<meta charset="utf-8">
This will force the browser to show the website in UTF-8, which will fix your problem.
Note that the link to the font says "subset=Latin". This is usually sufficient for ASCII-only text; for characters with diacritics, you need latin-ext, which means "extended Latin characters." This set should cover pretty much all characters used in European, Latin-script using languages (not Cyrillic, obviously).
This is configurable in the "character set" tab in Google's font picker.
I apologize, the code for importing external provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
In case the viewers of the site doesn't have the Ubuntu font in their devices please add this code:
Importing from external Provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Then, add Ubuntu to your font family list:
body { font-family: Ubuntu, "Times new roman", Arial, San-serif, Ubuntu; }
Hope this helps.

Opera not rendering certain characters from webfonts

Maybe it is not supposed to. But bear with me. I am using Google Web Fonts, and I am including PT Sans font like so:
<link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
and I even have .htaccess set like so:
<IfModule mod_headers.c>
<FilesMatch "\.woff$">
Header set Content-Type "application/octet-stream"
</FilesMatch>
<FilesMatch "\.ttf$">
Header set Content-Type application/octet-stream
</FilesMatch>
</IfModule>
Now PT Sans font does not include Baltic (ąčęėįšųūž) characters, which I am using. But Chrome, Firefox, IE render them all perfectly - not even using another font. Opera just skips them and leaves an empty space.
Just realized that it only does it with bold fonts. Check this example:
<!doctype html>
<html lang="en" class="no-js">
<head>
<title>Font test</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body style="font-family:'PT Sans';">
aceeisuuz<br />
ąčęėįšųūž
<p style="font-weight:bold">ąčęėįšųūž</p>
</body>
</html>
Now how do I fix it?
Looks alright to me, I just threw your example code into a jsfiddle. Maybe there's something else going on with your CSS/page?
http://jsfiddle.net/MetalFrog/gHhGv/
Since the PT Sans font does not contain the Baltic characters, browsers will use some fallback fonts. In the absence of declarations for this in the page style sheet, they will use their default methods, so browser differences are to be expected.
It is not clear why Opera sometimes fails here, but it is more important to provide some planned fallback. Either select a completely different font, or at least specify some alternate fonts in your font list, e.g. font-family: 'PT Sans', Arial, sans-serif. This prevents odd mixtures, like PT Sans and Times New Roman (the common default font) and may well circumvent the Opera bug too.
I've encountered same problem.
solution was:
Google Web Fonts page | Chose your cirilic Font | Quick usage | Verify your settings... -> add Cyrilic set to selection.
Clear Opera cache;