I've got a woff file named 'azonix-webfont.woff'. I added it to my website using #font-face. but it's not working. The text is displayed with the default font. Where's the error?
<head>
<meta charset="UTF-8">
<style>
#font-face
{
font-family: Azonix;
src: url(azonix-webfont.woff);
}
</style>
</head>
<body>
<p style="font-family: Azonix;">Hello!</p>
</body>
The text is displayed in default font. I don't know where's the error.
Edit: OK, I found the answer. It started working when I posted the files to the server.
You should upload your font to transfonter.org and convert. Will come css code with transfonter zip folder. And then you should change font url in css, according to place of your font files. Like this:
#font-face {
font-family: 'Proxima Nova Cn Lt';
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot');
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff2') format('woff2'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff') format('woff'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
Related
I'm using the following structure in a website:
Root
theme
index.html
assets
myfont
css
fontiran.css and style.css
fonts
IRANSansWeb.eot , IRANSansWeb.woff, IRANSansWeb.woff2, and IRANSansWeb.ttf
And the contents are:
index.html:
[...]
<link href="../assets/myfont/css/style.css" rel="stylesheet">
[...]
style.css:
#import url(fontiran.css);
body {
font-family: IRANSans !important;
}
fontiran.css:
#font-face {
font-family: IRANSans;
font-style: normal;
font-weight: normal;
src: url('../fonts/IRANSansWeb.eot');
src: url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
url('../fonts/IRANSansWeb.woff2') format('woff2'),
url('../fonts/IRANSansWeb.woff') format('woff'),
url('../fonts/IRANSansWeb.ttf') format('truetype');
}
But the font is not working on the website. FontFinder plugin for firefox shows:
Font
===============================
font-family (stack): IRANSans
Font being rendered: System Default
font-size: 13px
But it's not being used. What is the problem exactly?
Only Internet Explorer supports EOT files.
Use WOFF and WOFF 2 instead as they have decently wide browser support.
In my HTML:
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="add_ons/style_sheets/style.css" />
</head>
<body>
<div id="header">
<p id ="text" >BALL</p>
</div>
<body>
In the css I've tried:
#font-face {
font-family: 'Pier';
src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
src: url('add_ons/sources/fonts/Pier.woff') format('woff');
src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
}
#text{
font-family: 'Pier';
}
And it did not work, I've also tried to remove the format('truetype') part and to use src: url('Path'), url('Path'), url('Path') but that has not worked either.
Can somebody explain me how to properly insert my custom font into a webpage?
P.S.: My webpage isn't currently on any server I'm just opening the html file from my computer on chrome 47.0, could that be the cause?
Best practices is to always use a relative paths not absolute ones, to ensure it works for any domain.
From your code, I'm assuming you are having the following structure:
Root
index.html
add_ons
style_sheets
style.css
sources
fonts
Pier.woff2
Pier.woff
Pier.ttf
You could simply update your paths in the CSS from:
#font-face {
font-family: 'Pier';
src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
src: url('add_ons/sources/fonts/Pier.woff') format('woff');
src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
}
To:
#font-face {
font-family: 'Pier';
src: url('../sources/fonts/Pier.woff2') format('woff2');
src: url('../sources/fonts/Pier.woff') format('woff');
src: url('../sources/fonts/Pier.ttf') format('truetype');
}
I found out the answer!
When you say url() css expects a full url and not a relative one.
So:I was using a Path relative to my index.html instead of a full complete path so src: url('website/add_ons/sources/fonts/regular/Pier.woff2');
You should use src: url('C:/Users/Admin/Desktop/website/add_ons/sources/fonts/regular/Pier.woff2');
If you were using a website you should use the full path too iehttp://www.web.com/fonts/font.ttf
I created a webpage with the custom font, I can see the fonts applied in the browser but its not applied in the printed page.
I followed the below way for printing :
The fonttest.css file contains the following content :
#font-face {
font-family: "myriad";
src: url("../fonts/myriad.otf") format('truetype');
}
#font-face {
font-family: "serifa-bold";
src: url("../fonts/serifa_bold.ttf") format('truetype');
}
#font-face {
font-family: "serifa";
src: url("../fonts/serifa.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF";
src: url("../fonts/AlexandriaFLF.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Bold";
src: url("../fonts/AlexandriaFLF-Bold.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-BoldItalic";
src: url("../fonts/AlexandriaFLF-BoldItalic.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Italic";
src: url("../fonts/AlexandriaFLF-Italic.ttf") format('truetype');
}
In the HTML file the CSS file is linked as below :
<link rel='stylesheet' type='text/css' media='all' href='resource/css/fonttest.css' />
I was printing the following below lines :
<p style="font-family:myriad;color:#000000">myriad-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa-bold;color:#000000">serifa-bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa;color:#000000">serifa-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF;color:#000000">AlexandriaFLF-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Italic;color:#000000">AlexandriaFLF-Italic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Bold;color:#000000">AlexandriaFLF-Bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-BoldItalic;color:#000000">AlexandriaFLF-BoldItalic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
please help me ?
Try to put your stylesheet media attribute to print :
<link rel='stylesheet' type='text/css' media='print' href='resource/css/fonttest.css' />
If you don't find a way to do this, there is an alternative.
You could use wkhtml2pdf and make a printable PDF file.
Maybe you may need to include more fonts formats in your css.
Something like this:
#font-face {
font-family: 'XXXXX';
src: url('XXXXX.eot');
src: url('XXXXX.eot?#iefix') format('embedded-opentype'),
url('XXXXX.woff') format('woff'),
url('XXXXX.ttf') format('truetype'),
url('XXXXX.svg#XXXXX') format('svg');
font-weight: normal;
font-style: normal;
}
the url https://bugzilla.mozilla.org/show_bug.cgi?id=468568 which explains why print is not working for custom fonts, so I tested in firefox-20.0a1.en-US.win32.installer.exe. The fonts with ttf and otf are applied exactly as it should be.
I know that it's possible to have multiple font-faces on css.
Now I have two html pages that use these fonts but in the future there'll be more; now those font-faces are declared via inline css and used via classes. What I really wanted was to wrap up all my font-faces into a single fonts.css and then on each individual html pages reference that css and use <p class="...-font"><p>
So my fonts' css is like this:
#font-face {
font-family: 'Komika';
src: url('/bin/res/font/KOMIKAX_-webfont.eot');
src: url('/bin/res/font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
url('/bin/res/font/KOMIKAX_-webfont.woff') format('woff'),
url('/bin/res/font/KOMIKAX_-webfont.ttf') format('truetype'),
url('/bin/res/font/KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.komika-font {font: 30px 'Komika', Tahoma, sans-serif;}
#font-face {
font-family: 'Nevis';
src: url('/bin/res/font/nevis-webfont.eot');
src: url('/bin/res/font/nevis-webfont.eot?#iefix') format('embedded-opentype'),
url('/bin/res/font/nevis-webfont.woff') format('woff'),
url('/bin/res/font/nevis-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.nevis-font {font: 500% 'Nevis', Tahoma, sans-serif;}
And the html is like this:
<head>
<link rel="stylesheet" href="/bin/res/style-fonts.css.php" type="text/css" />
<link rel="stylesheet" href="/bin/res/style.css.php" type="text/css" />
<title><?php echo $photo_title ?></title>
</head>
<body>
<h1 class="____">Some text here</h1>
<body>
And at the ____ should be "nevis-font" but the IDE (Dreamweaver) doesn't even autocomplete.
Is it possible? Because I tried it and it didn't work (the chosen font wasn't displayed).
I think I got it, the problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.
Yes it's possible. We'll need more details on the problem you used to have in order to answer a more detailed answer.
The problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.
I downloaded some otf fonts and then converted them to eot using: https://onlinefontconverter.com but when I view the site in IE8, the fonts do not show (they show in Chrome, Firefox, Opera, Android). Something must be wrong with either my code or the eot. Does anyone know what's wrong?
(Download Roboto here: http://www.fontsquirrel.com/fonts/roboto )
(Convert it here: https://onlinefontconverter.com )
STYLES.CSS
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.eot");
}
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.ttf");
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
index.html (relevant code)
<div class="myDiv">Some font in here that shows incorrectly as Arial!</div>
The stylesheet and font are in the same folder.
Thanks for all the help. It looks like the problem was the font converter. The eot file was not being recognized as valid by IE. Thanks to "Joel Eckroth" for suggesting I try other converters.
Try this
#font-face
{
font-family: 'RobotoCondensed';
src: url('Roboto-Condensed.eot');
src: url('Roboto-Condensed.eot?#iefix') format('embedded-opentype'),
url('Roboto-Condensed.woff') format('woff'),
url('Roboto-Condensed.ttf') format('truetype'),
url('Roboto-Condensed.svg#') format('svg');
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
I had a problem and no amount of tweaking and web research helped
Until I edited head tag to include meta
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
</head>
The meta tag solved problem and every variation worked!
Variation 1
<style type="text/css">
#font-face
{
font-family: 'SolaimanLipi';
src: url('SolaimanLipi.eot');
src: local('SolaimanLipi'),url('SolaimanLipi.ttf') format('truetype');
}
#font-face
{
font-family: 'Yogesh';
src: url('CDACOTYGN.eot');
src: url('CDACOTYGN.ttf') format('truetype');
}
</style>
Variation 2
<style type="text/css">
#font-face{
font-family: 'solaimanlipi';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont?#iefix') format('embedded-opentype'),
url('solaimanlipi-webfont.woff') format('woff'),
url('solaimanlipi-webfont.ttf') format('truetype'),
url('solaimanlipi-webfont.svg#webfont') format('svg');
}
#font-face {
font-family: 'cdacotygn';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont.eot?#iefix') format('embedded-opentype'),
url('cdacotygn-webfont.woff') format('woff'),
url('cdacotygn-webfont.ttf') format('truetype'),
url('cdacotygn-webfont.svg#svgFontName') format('svg');
}
</style>
We think complex but often needle in haystack is elsewhere head meta tags
You may try and view source
http://www.weloveseppa.com/jnc/jncTryBangla.html
http://www.weloveseppa.com/jnc/try1/jncTryBangla.html
Works in all the browsers including the old IE8
Try
font-family: "RobotoCondensed", Arial, Helvetica;
The quotes should force it as your primary option