I have a problem with a font I installed on my computer that I want to apply to HTML5 / CSS3.
How my question differs from its possible duplicate: it explicitely asks what to put in the .html file, a question that was unaddressed in the duplicate question.
Update after problem solved:
1) The <link href=....> line must NOT be included in the .html file
2) The .woff font file must be in the same directory as the .css file.
This is my minimal working CSS:
#font-face{
font-family: Reef;
src: local('../Fonts/Reef/reef-webfont.woff'), url('../Fonts/Reef/reef-webfont.woff') format('woff');
}
body, h1, h2{
text-align:center;
font-family: 'Reef', monospace;
}
And this is my minimal working HTML file:
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript"></script>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" href="stylesGrilcheeserie.css" type="text/css"/>
<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
<title> Grilcheeserie </title>
</head>
<body>
<h1>La Grilcheeserie</h1>
</body>
</html>
Whatever I do, my page appears with its backup font, monospace, not Reef.
My question is: how do I correctly reference the font source in the html? As far as I can tell from searching answers, my css is supposed to be right.
I'm using Firefox on Windows 10.
<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
you cannot reference a font like this.
#font-face{
font-family: Reef;
src: url('reef-webfont.woff'), url('reef-webfont.woff') format('woff');}
put your fonts in the same directory where this style file is located
From my understanding, your local source should just display the name of the font as it's installed on your machine. The url source should point to where the font file is in relation to your CSS file location:
local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')
Related
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)
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!
So, I'm using a font-face webkit from fontsquirrel and I've put the stylesheet and all fonts in a folder called "Fonts" which is contained in my HTML folder with my Index.html file. I'm using Dreamweaver and iPage and I've put the new files and synched them, but they aren't showing on other computers on the live page like they should. They work in my preview obviously. Here is my code:
<link rel="stylesheet" href="Fonts/stylesheet.css" />
What about:
<link rel="stylesheet" href="Fonts/Stylesheet.css" type="text/css">
And are you using css to implement the tag, for example:
<style>
p {font-family: 'stylesheet', sans-serif;}
</style>
Is it possible to edit out the font tag in iPage and replace it with a text tag like
<p></p>
because
<font face="stylesheet"></font>
is deprecated, but may still work in preview mode.
I am learning HTML and want to use an external CSS for my site. I have created a very basic site and stylesheet and placed them in the same directory on my hard drive. The site opens in both Firefox and IE but Firefox ignores the stylesheet.
Can anyone tell me what I'm doing wrong? The HTML and stylesheet are shown below:
The HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body>
<hr />
<p>This is a website with a style sheet!</p>
</body>
</html>
The stylesheet:
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
The style sheet is save in the file style.css in the same directory as the HTML file, which is saved in a file called index.html.
Thanks everyone for the help, but I have just discovered the problem. The file style.css was save in DOS format, I saved it in unicode format and it now works!
First, if your doctype is HTML4 and not XHTML, you shouldn't use the syntax, so:
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
should be
<link rel="stylesheet" type="text/css" href="style.css" media="all">
Second, your CSS file is probably not delivered as text/css (missing mime-type declaration for .css) by the web server you're testing it on. Does it fail too when you open your file locally?
If this is an Apache server, upload a .htaccess file containing this:
AddType text/css .css
i am think i am using similar code i used b4 but seems like the fonts aren't loading
<html>
<head>
<script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></script>
<style>
h1, h2, h3 { font-family: "Yanone Kaffeesatz"; color: red }
</style>
</head>
<body>
<h1>This is some text</h1>
</body>
</html>
You need to include the font using a <link> tag.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold">
According to Google Webfont page the correct notation is:
<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='stylesheet' type='text/css'>
I've discovered another issue that can cause the fonts to not load. If you define a font as
family=Arapey:italic
then you need to use the css, like so
font-family: 'Arapey';
font-style:italic;
if you leave out
font-style:italic;
then the font will not load in Chrome (and possibly other browsers?). Although it will work in Firefox without it.
You have set the CSS file as a Script file by mistake.
<script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></script>
Should be
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css">
you can also put this in your .css file
#import url("http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here");
you won't end up cluttering up your HTML with all these silly link tags. google shows this under 'advanced'.
watch out if you're using LESSCSS because # defines a variable. let me know if there's a way to escape that - I couldn't find one!