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/
Related
I have this Html code in the head (for the Google Font and for the utf-8 encoding for Hebrew):
<link href="https://fonts.googleapis.com/css?family=Suez+One" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
I have this code in the style tag:
<style>
body
{
background-color:#ff8000;
font-family: 'Suez One', serif;
}
</style>
When I write in English/ numbers the font works properly in all browsers, but when I write in Hebrew the font doesn't work in Internet Explorer (works only with Google Chrome and Firefox).
Thanks in Advance.
I'm very new to web development, so I apologize if this is a silly mistake, but I can't seem to get a font that I've embedded in my CSS stylesheet, Fonarto, to appear on my webpage. I'm using Brackets to create the website, viewing it actively with the live preview, so I wonder if that has a role in creating this issue. Given that I'm not experienced with CSS, I used fontsquirrel.com to automatically generate code that would add my font in using an #font-face. This is what it generated, with a few tweaks (the font is stored in resources/fonts/fonarto/regular)
#font-face {
font-family: 'fonarto_regular';
src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot');
src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot?#iefix') format('embedded-opentype'),
url('resources/fonts/fonarto/regular/fonarto-webfont.woff2') format('woff2'),
url('resources/fonts/fonarto/regular/fonarto-webfont.woff') format('woff'),
url('resources/fonts/fonarto/regular/fonarto-webfont.ttf') format('truetype'),
url('resources/fonts/fonarto/regular/fonarto-webfont.svg#fonartoregular') format('svg');
font-weight: normal;
font-style: normal;
}
To add the style to the body, I'm doing what would be expected, though I haven't provided any fallbacks (should I be doing so, and if so, how?).
body {
font-family: 'fonarto_regular';
}
The code for my index page is as follows:
<!DOCTYPE html>
<html>
<style rel="stylesheet" type="text/css" href="stylesheet.css"></style>
<script>
</script>
<head>
</head>
<body>
<div id='index-head'>
<h1>Site Name Here</h1>
</div>
</body>
</html>
That is literally it thus far. And though, as I mentioned, I haven't added any fallbacks or done anything complicated, the header text, Site Name Here, displays in serif Times New Roman in the live preview.
What am I doing wrong?
Note that I've already looked at all of these posts on Stack Overflow, but none has helped; nor has w3schools. Also keep in mind that the live preview runs an instance of Chrome.
There are a few things you can check.
First of all, look in the inspector and see if you properly link to the fonts.
Also you should link to the css file this way:
<link rel="stylesheet" href="stylesheet.css">
You also have linked to the file outside your head tags.
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>
try adding the entire URL for the fonts.
Check if that works.
Download #font-face of Fonarto from here, then add index.html with follow code on the same folder with fonts and stylesheet.css.
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div>Hello</div>
</body>
</head>
</html>
Also add to stylesheet.css
body {
font-family: 'fonarto_regular';
}
For me it's working fine!
I put the ttf font file on the server and used the following code in CSS
#font-face {
font-family: "fontname";
src: url("http://www.mywebsite.com/Fonts/fontname.ttf");
}
body {
font-family: "fontname", sans-serif;
}
In the local HTML file I wrote:
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cssfile.css">
</head>
<body>
body
</body>
</html>
I tried different ttf files on the server but none of them worked. But if I put the font in the same directory as the HTML file on the computer it shows up. Does anyone know why? Thanks.
Are there any console errors in the browser? There may be a cross site scripting issue at play.
Here's an article about cross-domain fonts if so which should explain in more detail. Basically, your webserver needs to add this header to the font response:
Access-Control-Allow-Origin: *
http://davidwalsh.name/cdn-fonts
I was trying to use google web fonts on my JSP page but it doesn't seem to work correctly. On my Fedora 16 OS I have got Chiller font installed. And when I run the code that displays the text in Chiller font using google font apis on Fedora, it displays the text in that font but when I try it on Ubuntu, that doesn't have the chiller font installed, browser displays the default font it might use in the fallback. What could be the reason for this ? The snippet :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chiller">
<style>
#page_font {
font-family: 'Chiller';
font-size: 50px;
}
</style>
<title>New Year Countdown </title>
</head>
<body> <div id="page_font"> <br /> Countdown </div> </body>
Note: The web address of that JSP page, where I have used this snippet.
When calling http://fonts.googleapis.com/css?family=Chiller the Google website responds with:
Error (400): Missing font family
They didn't have a font named "Chiller"!
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;