The HTML is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
h1 {
font-family: 'Open sans',sans-serif;
font-weight: 300;
}
</style>
</head>
<body>
<h1>
Tām rō̜i ʻĀthit ʻUthai Rātsadō̜n</h1>
</body>
</html>
The bottom is Firefox 103.0.2 and top is Chrome 104.0.5112.79. (Running macOS Monterey 12.5)
When I change the font-weight from 300 to 400 (or more), Chrome starts displaying everything correctly. Not sure what the issue is.
Rendered Fonts section of Chrome (right) and Firefox (left).
There is a possibility that your language is not supported with utf-8 encoding, so check this out here: https://www.ibm.com/docs/en/aix/7.2?topic=globalization-supported-languages-locales.
also: better to import your data via url() as string, I mean replace
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
with
#import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700");
Related
When I try to use font-face it just does nothing, it doesn't change the font. Why is it not working?
Here is my HTML CODE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="schriftarten.css">
</head>
<body>
<span id="span1">Hallo Welt</span>
</body>
</html>
Here is my CSS Code:
#font-face {
font-family: "Test";
src: url("Anton-Regular.ttf") format("ttf");
font-style:normal;
}
#span1{
background-color:orange;
font-size:30px;
font-family:Test;
}
What am i doing wrong? I'm using Chrome Version 84.0.4147.135 (Offizieller Build) (64-Bit)
You need to use all types of font for matching all browsers standards here is an example to give you the idea about your css code:
#font-face{
font-family:YOUR_FONT_NAME;
src:url('YOUR_FONT_NAME.eot');
src:url('YOUR_FONT_NAME.eot?#iefix') format('embedded-opentype'),url('YOUR_FONT_NAME.woff') format('woff'),url('YOUR_FONT_NAME.ttf') format('truetype'),url('YOUR_FONT_NAME.svg#weberdsBold') format('svg');
}
I just found the solution.
The error was the format("ttf")
when i removed it, it was fine
I write this sample code on notepad for an html site with css but this won't work on Mozilla(version49.0.etc) while it does on IE, Chrome and Opera. If i start it on FF, debugger says "CSS has no errors" but it only display html code.
Someone know how to fix it?
Here there are the codes(html and CSS) of my site on local path:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
<html lang="it">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="iso-8859-1">
<title>Site</title>
<style type="text/css">
</style>
<link href="C:/Users/Dean/Desktop/Site/File/file1.css" rel="stylesheet" media="all">
</head>
<body class="sub">
<div class="alt">
<h1>Text here</h1>
</div>
</body>
</html>
And here there is the CSS file properties:
.sub{background-image:url("../image/bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
.alt {background-color:hotpink;
box-align:right;
border-radius:10px;
}
.set {font-size:12px;
color:white;
}
I'm assuming it is because your stylesheet is linked via the non standard file protocol (href="C:/Users/Dean/Desktop/Site/File/file1.css"). From my experience, Firefox usually complies to standards more than other browsers.
I'm assuming this is why your example works in other browsers, but not in FF. Try serving your stylesheet using an HTTP server.
I just started creating a personal website for me, then I came across a problem. As soon as I include two stylesheets, the second stylesheet doesn't load (doesn't render). My first stylesheet that does load (does render) looks like this:
#font-face {
font-family: 'archive';
src: url('archive-webfont.eot');
src: url('archive-webfont.eot?#iefix') format('embedded-opentype'),
url('archive-webfont.woff2') format('woff2'),
url('archive-webfont.woff') format('woff'),
url('archive-webfont.ttf') format('truetype'),
url('archive-webfont.svg#archive') format('svg');
font-weight: normal;
font-style: normal;
}
The second stylesheet that doesn't load (doesn't render) looks like this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #FFFFFF;
background: #333333;
}
h1 {
margin: 0;
font-family: archive;
}
My HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Jacques Marais</title>
<link rel="stylesheet" href="fonts/archive.css" title="Archive Font CSS" />
<link rel="stylesheet" href="css/master.css" title="Master CSS" />
</head>
<body>
<h1><span class="first-character">J</span>acques Marais</h1>
</body>
</html>
When I look at the Resources panel in the Developer Tools, it shows both stylesheets, but when I look at the Sources panel, it only shows that one loaded:
Sources
Resources
I tried all methods mentioned here and here.
Update
Here are the Network and Console panes.
Update 2
Update 3
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Jacques Marais</title>
<link rel="stylesheet" href="fonts/archive.css" />
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<h1><span class="first-character">J</span>acques Marais</h1>
</body>
</html>
I just deleted the title attribute inside your link tag and it works. (I've tested it on my webserver)
No title attribute inside <link> tag.
http://www.w3schools.com/tags/tag_link.asp
Ops, never mind, it supports global attribute (included title), anyway if you delete them the page works... I've noticed also it works if you leave title attributes but without spaces inside them.
Try to change your titles and delete all the spaces.
I am not sure is it really work or not. I have faced this same problem and found solution. At the second stylesheet do like this -
h1 {
margin: 0;
font-family: 'archive'; /* add your font-family name inside '' */
}
Using the Google Font "Source Sans Pro" I find that Firefox and Safari won't render the Czech characters 'Š' and 'č' properly (it seems to fall back to the next-choice font, which I've set to serif in the example below for clarity:
However Chrome does a better job:
so the font definitely includes these characters. Is this a bug in those browsers or a mistake in my HTML?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test document</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700'
rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Source Sans Pro', serif;
font-size: 16px;
}
</style>
</head>
<body>
<p>Here is my Czech colleague's surname: Šimečková</p>
</body>
</html>
Those accented characters are in the Latin Extended characters set. You should link to:
http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700&subset=latin-ext,latin
I've just created a custom font with different icons for 32 and 160 symbols but in Chrome they always look the same when html code indeed contains different symbols like:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Font test</title>
<style>
#font-face {
font-family: "myfont";
src: url("ArialWithSpaces.ttf");
}
body{
font-family: "myfont";
}
</style>
</head>
<body>
<p><span >1 2 3 4 5 6</span></p>
</body>
</html>
Does Chrome INTENTIONALLY render the same char for both 'space' (32) and 'nbsp' (160) symbols?
It looks like a bug...
Here is my 'custom' font with a custom nbsp icon:
https://mega.co.nz/#!xQlEHQxB!-fGG1o88nCnIyOrbE64O--a2eewZBZrvTOgC1MuSC5g