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;
Related
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.
The font was rejected by the sanitizer according to the message in the mozilla debugger. Other fonts have worked. HTML and css both validated, but font still doesn't work.
#font-face {
font-family: "parisr";
src: url("parisr.woff") format("woff");
}
p
{
font-family : "parisr";
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>INDEX.HTML</title>
<link rel="stylesheet" href="style.css">
<style type="text/css"></style>
</head>
<body>
<p>With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts. Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>
</body>
</html>
ok so with web fonts its not exactly because of css3, its because of security reasons fonts can be dangerous. some browsers like firefox will only allow the font from the domain eg, if your running a website that you can get to via 2 domains like mywebsite.com and mywebsite.com.au the fonts have to be served from those domains.
you do this like you have done above in your stylesheet, But make sure that the urls to the fonts are correct. the above css states that the url of the font is yourwebsite.com/parsir.woff if this is correct thats good but you might also require the other versions which you can do here https://www.web-font-generator.com/
The following setup
HTML
<!DOCTYPE html
SYSTEM "about:legacy-compat">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>SymbolTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<span class="greek">μ ω Ω ≥ ⊗ ↔ ± √ ≠ ♦ ♥ ♠ ⇐ ⇒ ⊥ ♦ ⊆ ∅</span>
</body>
</html>
CSS
#font-face {
font-family: Symbol;
src: url("../fonts/Symbol/symbol.eot");
src: url("../fonts/Symbol/symbol.eot?#iefix") format("embedded-opentype"), url("../fonts/Symbol/symbol.woff2") format("woff2"), url("../fonts/Symbol/symbol.woff") format("woff"), url("../fonts/Symbol/symbol.ttf") format("truetype"), url("../fonts/Symbol/symbol#symbolregularregular") format("svg");
font-weight: normal;
font-style: normal;
}
span.greek {
font-family: Symbol;
}
Produces very weird results in Internet Explorer compared to other browsers;
Crome, Local
Chrome, Server
FF, Local
FF, Server
IE10, Local
IE10, Server
IE11, Local
Asks me wether I want to allow ActiveX components - Note that in the background, the font used is the default windows Symbol font...
After clicking "accept", it changes to
What is going on here? I created the font using FontSquirrel and used the "bulletproof" #font-face syntax, but it's still not working as expected...?
After further investigation, the issue seems to be resolved. As Mr Lister pointed out, IE itself apparently doesn't like when you paste UTF8 symbols and wrap them in the Symbol font.
I checked into the Symbol font with a designer colleague and it appears that IE tries to actually use the typed character (e.g. U+221A which is SQUARE ROOT) and maps it against the used font - Symbol.
Symbol obviously doesn't have a proper character for the character at code point 8730 - because Symbol only supports 255 characters.
This means, IE will display a ? instead.
The insteresting point here is, that the other browser fall back to the default font and use the UTF8 value of the character and display it properly.
The solution we now use is to not use any font, as the whole publication process is UTF8 anyway, so there is no need to actually use the Symbol font anywhere. We just copy all characters as they are, and it works.
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.
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">