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
Related
I am currently creating a HTML document from scratch. I am using MAMP to host the site however when I link to a google font it doesn't work.
When I download it do I link it to my css file? and if so how do I call it?
Thanks
Its better to customize the font in your site, and for customization you need to download fonts in four formats (webfont.eot, webfonts.svg, webfonts.woff, webfonts.ttf) and then use them from CSS. Follow this url:
https://css-tricks.com/snippets/css/using-font-face/
Check this example for how to use online fonts.
<html>
<head>
<style>
#font-face{
font-family:fontName;
src:url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2)
}
body{
font-family:fontName;
font-size:2em;
text-align:center;
}
</style>
</head>
<body>
<h1>Title</h1>
</body>
</html>
Rather than downloading them and serving them 'locally' I'd suggest to check what the error might be and use the fonts delivered via Google API. They provide a getting started guide, so you can start with a basic example like the following and work your way up to what you need:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.fancy {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
Example for using
<span class="fancy">Tangerine</span>
</body>
</html>
You can also browse all available fonts here and let google generate a custom <link rel="stylesheet" ...> tag for you which serves only what you explicitly specified.
I can load fonts from server. but it's not proper way.
How can I load fonts with base 64?
i used this my css file
#font-face {<br>
font-family: 'MyFontFamily';<br>
src: url(data:font/ttf;charset=utf-8;base64,data_base64);<br>
}<br>
.t{<br>
font-family: "MyFontFamily";<br>
background-color: red;<br>
}
this is my html page
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Document</title>
</head>
<body>
<p class = 't'>test</p>
</body>
</html>`
If I understood you correctly then you want to include a base64 encoded font inside of your css file.
To do that use the following syntax:
#font-face {
font-family: 'MyFontFamily';
src: url(data:application/x-font-woff;charset=utf-8;base64,base64_code_here) format('woff');
}
The data header and format change according to the encoded font.
I made an example on JSFiddle: https://jsfiddle.net/b7sp45ca/
Also as Chris J mentioned in the comment section if the line breaks are in your code then you are going to have to get rid of them.
(Resources used: http://sosweetcreative.com/2613/font-face-and-base64-data-uri)
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/
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'm trying to teach myself html/css. I can't get Aptana to recognize my css stylesheet.
Here's what I have for my html file (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Josh's Worthwhile Practice</title>
<meta name="author" content="Joshua Soileau" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!-- Date: 2012-07-11 -->
</head>
<body>
<div id="nav">
<ul>
<li><h4>Solutions</h4><p>what we do</p></li>
<li><h4>Work</h4><p>what we've done</p></li>
<li><h4>Team</h4><p>who we are</p></li>
<li id="nav_logo">LOGO</li>
<li><h4>Blog</h4><p>stuff we say</p></li>
<li><h4>Contact</h4><p>talk to us</p></li>
<li><h4>Client</h4><p>login</p></li>
</ul>
</div>
</body>
</html>
And here's my .css file (style.css, in the same directory as index.html)
* {
clear: both;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
#nav {
color: #121415;
width: 100%;
height: 30px;
}
I have the link tag in my html code:
<link rel="stylesheet" href="style.css" type="text/css"/>
But when I open index.html in a browser or the Aptana preview pane, it just shows the plain html with none of my css pulled in.
Am I missing something obvious?
I found my answer. I had left an empty css tag in the file and Aptana didn't like it. This is my fault, I left it out of this post because I didn't think it was relevant.
I had:
#nav li {}
Sorry for not given you guys all the info, you were all very helpful and I helped me learn some new things. Thanks!
Try removing the type="text/css" attribute. Most modern browsers will complain if a type is specified and doesn't exactly match the Content-Type header the file returns, and when loading files locally there is no Content-Type header.
Your style.css file must be in the same location as index.html for it to work.
What do you see in the address bar of the browser when previewing?
What happens if you replace index.html with style.css? Are you able to see the CSS file?
Does it work without Aptana's preview, if you open the index.html file directly?
Also open up firebug or developer tools and hit the network tab to check if the browser is making a request for the CSS file and what if any errors are being reported. Also check the response headers.
You may also want to verify what Aptana is doing to your source after it generates the preview. Does doing a view source in the preview browser show the exact same link / path to the stylesheet?
Do you have a similar issue as this user with absolute path's in Aptana's preview: Aptana Studio 3 preview problems with absolute path
I'm pretty sure aptana has autocomplete on files and other html/css tags so try
<link rel="stylesheet" href="
I believe that when you have typed this if should start to give you all the files within your folder hysterical set up. If it doesn't try a / or the likes?
try putting it in a folder for example CSS
<link href="CSS/aki.css" rel="stylesheet"
type="text/css" />