html; load custom fonts with base64 - html

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)

Related

Why does #font-face fail in my style sheet?

I want to specify a custom font in my style sheet. I can get the font to work in a link statement in my html header, but I'd rather put it in my style sheet. When I uncomment the link statement, it works. Here's my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Bug</title>
<link rel="stylesheet" href="fontBug.css">
<!-- <link href='https://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet'>-->
</head>
<body>
<p>This is normal text. It should display in a sans-serif font in black against white.</p>
<p class="customFont">This text should use the custom serif font, in a custom color</p>
<p>When I uncomment the link line inside the head tag of the html file, the
font works. I don't understand why it doesn't work from the style sheet.
I know it's using the style sheet because I get the custom colors.
</p>
</body>
</html>
Here's my .css file:
#font-face {
font-family: Metamorphous;
// I have tried it both with and without the format specifier.
src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}
.customFont {
font-family: Metamorphous, Sans-Serif;
background-color: #294575;
color: #6291D8;
}
body {
font-family: Sans-Serif;
font-size: 24px;
}
I think you might have implemented it the wrong way in your stylesheet. Try replacing
#font-face {
font-family: Metamorphous;
// I have tried it both with and without the format specifier.
src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}
with
#import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
h1 {
font-family: 'Metamorphous', cursive;
}
That seems to work
#import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
h1 {
font-family: 'Metamorphous', cursive;
}
<h1> Test </h1>
#font-face is used to import your self designed font.
But Metamorphous is a web-safe font and it can be imported by using methods the other guy said already.
My problem was that I misunderstood the meaning of the url() function. I thought it was for a URL to a resource on the web, but it's actually for a path to a local file. It turns out that font-face is actually meant for fonts installed on the server, rather than accessed through a URL. People have been telling me it's for "self designed fonts." This includes, but is not limited to, fonts you designed. I didn't design the font, but I downloaded it to my development environment, and set the font-face url to the relative path to that file (relative to the .css file) and it started working. I don't know why they call it the url function, but the alternative, local(), is apparently for fonts installed in the local computer. Thank you to the two people who answered. Their answers guided me to this solution.

I'm having trouble linking the css file in my html

When I open the html file in chrome or IE, the background color and font size doesn't change and I don't know why.
Is it the way I linked to the css file from the html ? Is the path wrong? Should I use / instead of \ in the path name? Is the css content of the css file ok?
This is the head section of my html document (notepad):
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/CSS3/css/styles"/>
</head>
This is the content of my .css document (I'm using notepad):
h1{
background:#B3B3B3;
font-size:150%;
}
My css file is located here --> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
My html file is located here--> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\html
Since you are using external CSS:
HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/home/bhavya/Desktop
/styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Content of styles.css document
body {
background-color: powderblue;
}
h1{
background:#B3B3B3;
font-size:150%;
}
So the reultant output will be:
Update 1:
I think there is some syntactic error in the path which you are using C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
DO CHECK YOUR PATH AGAIN, AND DONT FORGET TO SAVE YOUR CSS FILE WITH .css extension AND YOUR HTML FILE WITH .html extension
I had a folder with 2 folders in them. One named html and the other css. I fixed this by deleting the html folder and putting the html document in the folder, like this:
revised file path
I also changed the <head> link in the html file, like this: <link rel="stylesheet" href="css/style.css"> and it worked.

How to link to a .woff font file in html document

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')

CSS Embedded Font Does Not Appear On Webpage Using Brackets

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!

Font on the server doesn't show on local HTML file

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