How to make #font-face work in my Wordpress template ?
this is the css code
#font-face {
font-family: 'BorisBlackBloxx';
src: url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.eot');
src: url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.eot?#iefix') format('embedded-opentype'),
url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.woff') format('woff'),
url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/BorisBlackBloxx.ttf') format('truetype'),
url ('http://www.make-sport.ru/wp-content/themes/make-sport/fonts/borisblackbloxx-webfont.svg#BorisBlackBloxxRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.logo a{
font-family: 'BorisBlackBloxx', helvetica, arial;
font-size: 72px;
color: #000000;
text-decoration: none;
}
this is HTML markup
<div class="grid_12">
<h1 class="logo">
MAKE SPORT
</h1>
</div> <!-- logo end -->
I read all the posts on this site and not one of them was not help me.
T tryed make different things with the paths and take the #font-face code from css to the html in the tag, nothing works
How do you think, that's wrong ?
Looks like the targeting is correct, but the font isn't read properly. Try placing the font embedding code in your main style sheet (style.css). Preferable near the top of the document.
I just looked through the source of your site.
The only place I could find that you were trying to use the 'BorisBlackBloxx' font was on .logo a, however the text in there is in an image.
It should go without saying that font files can not change the font used in images. Are you using this somewhere else on the page that I am not seeing.
Also, if thats the case, have you tried a variety of browsers?
Related
After googling several hours, I still cannot have custom fonts displayed in PDF generated by Odoo. Help much appreciated, please! Here is the complete story.
I created a custom report inheriting account.report_invoice_document. This is needed as invoices are customized to display extra information (like a Harmonized System Codes summary, for example). I was also asked to use a custom font to customize the layout of our invoices.
In this template, I added an inline style sheet and applied a font-face to the whole document:
<style>
#font-face {
font-family: 'My Font';
font-weight: normal;
font-style: normal;
src: url(data:font/opentype;charset=utf-8;base64,d09GRg<!--[ LONG BASE64 STRING ]-->DN6ag4) format('woff'),
url(data:font/truetype;charset=utf-8;base64,AAEAAA<!--[ LONG BASE64 STRING ]-->moOA==) format('truetype');
}
html, body
{
font-size: 8;
font-family: 'My Font';
}
</style>
Tuning the Invoices report to produce HTML, I'm able to get the expected results on screen in my browser (given the font is not installed on my computer running the browser). Pressing the Print button export the same report as a PDF file through wkhtmltopdf I get my invoice with the correct data, but not the right font family nor size.
Things I tested, without success:
use only WOFF
use only TTF
use both WOFF and TTF
direct PDF generation without primarily HTML display on screen
add a .mytest class in style an apply it to specific html tags
Still the same: OK on screen, not as expected as PDF file.
For experimentation, also tried to include Material Icon as follow:
<style>
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('data:font/truetype;charset=utf-8;base64,AAEA<!--[ LONG BASE64 STRING ]-->ABc=') format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>
and later adding this somewhere in the template.
<span>TEST <i class="material-icons"></i></span>
Same as above: works well on screen and displays "TEST" + a smiling face icon, works partially on PDF and only displays TEST without the face icon.
I'm stuck there. Could someone help?
Thanks.
This is my first time using font-face, and it's really hard for me to actually render the exact font, especially when it comes to *.ttc files.
Here is what I've done so far:
#font-face {
font-family: 'FontName';
src: url('../fonts/font.ttc') format('truetype');
font-weight: normal;
}
.header {
font-family: 'FontName;
}
When I check the network tab in Chrome's inpector, I can see that the font is loaded successfully, but the result text still uses another font.
What did I do wrong? Please help me to fix this problem. Thanks a lot in advance.
Update
One more thing that I figured out. When I style inline, the font is rendered correctly.
<p style="font-family:'FontName'">test 2</p>
Is there any delay in loading or something like that?
You can't use font collections for CSS #font-face declarations as the purpose of this syntax is to, unambiguously, specify which single font resource must be used by the browser when you specify some specific combination of font-{family, weight, style, etc} in your actual page CSS.
Specifying a font collection makes this impossible: there is no syntax to specify which font inside that collection you would need, so ttc are not supported by design. Extract the individual font assets you need (if legally allowed!) and then be explicit about which single font you need for which single #font-face declaration.
And remember that this is possible:
#font-face {
font-family: myfont;
font-weight: normal;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
#font-face {
font-family: myfont;
font-weight: bold;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
...
:root {
font-family: myfont;
}
h1 {
font-weight: normal; /* will use that-font-I-like-Regular.woff */
...
}
p {
font-weight: bold; /* will _also_ use that-font-I-like-Regular.woff */
...
}
I'm almost 100% sure what I'm doing is exactly correct Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homepage.css"/>
</head>
<body>
<div id="menu">
<p>THE BIG BLUE SITE OF SAILING KNOWLEDGE</p>
</div>
</body>
</html>
CSS:
#font-face: {font-family: "ostrich-reg"; src: url('Fonts/ostrich-regular-webfont.ttf'); }
#font-face: {font-family: "ostrich-light"; src: url("Fonts/ostrich-light.ttf"); }
#font-face: {font-family: "collab"; src: url("Fonts/ColabThi.otf"); }
#menu {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
height: 100vh;
width: 27%;
background: #2d5dac;
text-align: center;
}
#menu p {
color: white;
font-family: ostrich-reg;
font-size: 60px;
}
There's really not much there, not much room for error, so I thought it was my file. I got the file from Font Squirrel, which from what I've heard is a pretty reliable source (I've used them several times before myself), but just for fun I ran it through their webfont generator and it still didn't work. Also, I've straight up tried using another file and got the same result (it was another format as well - .0tf). So I've got no idea. Any suggestions?
By the way, I know this won't work on IE, I literally just started making the site today and I'm not too concerned with that yet.
Here's what happens when I try filtering for fonts:
So, as long as I'm doing this right, I'm pretty sure that means the fonts aren't loading. Which is weird, because I'm pretty sure the path is indeed correct... The Fonts folder is in the same folder that the .html file is in, and the fonts are directly in the Fonts folder.
I used this font on one of my project. I used something like this in my CSS file (still I use my all font in this manner only)
CSS
#font-face {
font-family: 'OstrichSansCondensedLight';
src: url('ostrich-light-webfont.eot');
src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
url('ostrich-light-webfont.woff') format('woff'),
url('ostrich-light-webfont.ttf') format('truetype'),
url('ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg');
font-weight: normal;
font-style: normal;
}
But I used .eot, .woff, .ttf, .svg files. And yes it was working on IE8+ because I used src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
let me know if you are facing any issue or any font file is missing I can try to find that for you.
After a long search for the right font, I decided to create my own. I based it off a photoshop Arial font that was alised (pixelated = anti-aliassed:none).
Here is the photoshop rendition of the font
After, I created a font using FontStruct with the exact same pixel configuration it would show up in photoshop with each individual letter. I created the font, tested it in photoshop and it worked beautifully in photoshop. It would appear exactly the same. BUT then I added it to my website to be used and for some reason the browser shrunk the font horizontally.
Why did it shrink horizontally? My font size is 8px and at 8px it should show perfectly, but instead is is horizontally squeezed. Any thoughts? Thanks
The font is linked with css
#font-face {
font-family: 'Arial Pixel';
src: url('ArialPixel.ttf');
}
and it is shown through h1 tag
h1 {
text-align : center;
color : #FFF;
font : 8px 'Arial Pixel'; }
Font is here
You'll need to convert the .ttf file here http://www.fontsquirrel.com/tools/webfont-generator
From here you'll need to upload the font files (referenced below) to your server. Absolute URLs won't work with web fonts so keep it local
Use the following code
CSS
<style type="text/css">
#font-face {
font-family: 'arial_pixelregular';
src: url('arialpixel-webfont.eot');
src: url('arialpixel-webfont.eot?#iefix') format('embedded-opentype'),
url('arialpixel-webfont.woff2') format('woff2'),
url('arialpixel-webfont.woff') format('woff'),
url('arialpixel-webfont.ttf') format('truetype'),
url('arialpixel-webfont.svg#arial_pixelregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'arial_pixelregular';
font-weight: normal;
}
</style>
HTML
<h1>ABC</h1>
I have problem with CSS content value. It’s not displayed at all, just codes, like in the picture. Can anyone explain what causes it? I’ll try to fix it, without posting code here.
HTML:
<i class="icon-map-marker"></i> Atlanta
CSS:
.icon-map-marker:before{
content: "\f041"
}
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot') format('embedded-opentype'),
url('fontawesome-webfont.woff?') format('woff'),
url('fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal
}
[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
margin-top: 0
}
This is caused by the character not being defined in the font used to display it. A placeholder is displayed instead. In Font Awesome, the fa-map-marker character is on that position.
Clearly font-family: FontAwesome is not used for the :before pseudo-element. Either it is not set, the font is not available, or a browser bug is triggered. I assume that no other CSS rules are used (otherwise overriding somewhere in the cascade could take place).
font-family: FontAwesome not set?
:before is child of the element it is “before”, so it inherits font-family correctly. The parent has font-family: FontAwesome unless the rule is invalid, which is not the case. Therefore the problem is not here and it must be in the unavailability of the font.
To be absolutely sure, try changing your rule for :before to
.icon-map-marker:before {
content: "\f041";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
}
and see if now the character displays OK.
FontAwesome font family not available?
Either the font cannot be downloaded, is broken, or the #font-face at-rule is invalid.
The at-rule seems perfectly valid to me. I’m just wondering, why the question mark after the WOFF path? I think this is a left-over after old IE (< 9) hack, but it should do no harm.
Checking the ability to download correct font file is up to you. You can verify that the font is loaded by sniffing the network traffic, e.g. using Firebug or LiveHTTPHeaders (but be sure to use your font and reload skipping cache via Ctrl + F5).
I think your problem is a browser bug. You did not specify what browser in which version you use, so I cannot say anything more specific.
To be always sure, you can use CSS from the CDN. Or follow the instructions on the same site to get Font Awesome working. You can also read more on bulletproof #font-face yourself, but then you need to keep up with the current implementation status of #font-face in browsers you want to support.
Quick test of fa-map-marker in :before using CSS from CDN
Insert this into your location bar:
javascript:'<title>Font Awesome test</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><style>body:before {font-family: FontAwesome; content: "\\f041";}</style>Atlanta'
The \\ is needed instead of \ inside JavaScript string. The string is a valid HTML5 document.
Side notes
U+F041 is a character from range reserved for private use. Consequentially different fonts may have different characters for this code point.
Maybe it would be better to use more classes instead of the two-in-one. Using icon and map-marker could both simplify your selectors and tell you that your classes could be more semantic. Using a CSS preprocessor could let you compose the more semantic class city of lower, purely presentational units.
Your HTML markup is terrible. It is awfully bent to serve your presentational requirements, but HTML should mark up the structure that is presentation-agnostic. Why don’t you use Atlanta?
may be its a cache issue on your browser, try adding version numbers next to file name.
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v1');
src: url('fontawesome-webfont.eot?v1') format('embedded-opentype'),
url('fontawesome-webfont.woff?v1') format('woff'),
url('fontawesome-webfont.ttf?v1') format('truetype');
font-weight: normal;
font-style: normal
}