For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
Related
I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:
<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>
I then use them in CSS rules like
body {
font-family: "Roboto Condensed", sans-serif;
[ ... ]
}
h1 {
font-family:'Signika', Arial, Helvetica, sans-serif;
[ ... ]
}
Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.
If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.
Any suggestions how I could fix that?
EDIT/ADDITION:
Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.
I found the solution myself:
As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.
I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:
#font-face {
font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff'),
url('RobotoCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;
Now it works, also in the PDF.
You don't need to actually do all of this. Simply use the #importoption to embed the font in your html. Works like a charm using laravel-dompdf.
screenshot
I've came across a problem with custom font i use for my website.
So i use following CSS for text.
font-family: "Open Sans",Helvetica,Arial;
font-weight:600;
As website is built in my native language, i have to use UTF-8 symbols, that doesn't seems to be included in Open Sans, so they are being shown in Helvetica instead, but the problem is that they have more weight.
Is there any possible solutions to set font-weight parameter to normal, if fallback font is being used?
You could define a new #font-face for each font you want.
#font-face {
font-family: 'mainFont';
src: url(/*Link to Open Sans*/);
font-weight: 600;
}
#font-face {
font-family: 'secondaryFont';
src: local('Helvetica');
font-weight: 400;
}
#font-face {
font-family: 'tertiaryFont';
src: local('Arial');
font-weight: 600;
}
Then you'll end up with font-family: 'mainFont', 'secondaryFont', 'tertiaryFont'; which should get the desired results.
Unfortunately, there is no way to define fallback font specific styling using CSS alone.
As such you may want to attempt to work out the font being used, then apply a style as a result, see here for one method which works out the width resulting from applying a font to an element before 'best guessing' which it is.
That said, it is essentially a hack/workaround.
Otherwise, you could look into implementing a method to identify where the symbols are and then wrap them in styles span tags, again this would be a fairly dirty hack as opposed to a clean solution.
I believe MichaelM's solution won't work. What you can do is specify the font files using the "postcript name" that you can find in various font info sites online.
font-family: "Open Sans",Helvetica-Light;
unfortunately specifying font-weight: 600 might result in undefined behavior. some browser might try to make it bolder, some might just leave it be.,
This is a general issue, and it seems like there is a solution.
Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Problem is, that I'm using google web fonts, and importing the font like this:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And I dont know, and cannot find out, how to import it with the #font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.
Hope you can help.
You'll have to host the fonts yourself if you want to apply this fix.
Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
If you actually make the request yourself using curl:
$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic
this is what gets sent back:
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 400;
src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 700;
src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 400;
src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 700;
src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.
Then you can use the suggested fix from here, referencing the font files you downloaded:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Did you do a proper reset of all styles?
Your inconsistent rendering experience can be caused by the browser defaults.
A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css.
Another way to reduce inconsistency is to use normalize.css.
The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.
Differences between both are explained here by the developer of normalize.css.
If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.
You can read about font weights here: http://css-tricks.com/watch-your-font-weight/
You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.
Add this to your stylesheet for each element.
opacity: .99;
For example -
p, li {
opacity: .99;
}
I have no idea why this works but it did.
My website is not showing the appropriate font, PT Sans.ttc. I checked on other browsers and it works fine.
www.farmap-ux.com. Below is CSS code.
#font-face
{
font-family: PT Sans;
font-family: font-family: 'PT Sans', sans-serif;
src: url("http://fonts.googleapis.com/css?family=PT+Sans")
}
So it works on everything like I said (Chrome, Safari, even Opera!) Any ideas? I've tried to find .woff files for the font but I don't think it's in my Font Book.
Maybe it's because your #font-face declaration isn't valid at all. It should be something like:
#font-face
{
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
However, it's even better to use the CSS file provided by google:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
If you want to stick to a CSS import use
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
You should really check your css! The syntaxe is miles away from correct.
Also, http://fonts.googleapis.com/css?family=PT+Sans is already a css file!
what you should do is import is put it directly into the <head> your html using the link tag.
Have a look at this example: http://www.w3schools.com/tags/tag_link.asp, or just add the following to your html file as said before.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans">
Following the directions at Google Webfonts should fix your problem.
First, make sure you're including the Google CSS necessary to reference the font files. You have the option to include a LINK tag in your HTML, a #import directive in your CSS, or some Javascript. I recommend the LINK tag for maximum browser compatibility:
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
When adding this CSS to your site, Google will automatically determine the correct font type to use for your browser. Not all browsers use WOFF files. Older versions of IE use EOT files, some browsers prefer SVG or TTF. Google is able to sniff for the browser type and modify the included CSS as necessary.
After Google's CSS is included, you only have to reference the font family in your CSS where you want the font to appear.
font-family: 'PT Sans', sans-serif;
That's the only CSS necessary. Remove all the other CSS you linked… as mentioned in the other answers your CSS has some errors.
Try:
#font-face {
font-family: 'PT Sans';
font-weight: normal;
src: url("http://fonts.googleapis.com/css?family=PT+Sans");
}
I am writing the following CSS code to create font face style using an Arabic font, and i am using windows OS...
the problem that browsers doesn't read it, i am testing on chrome, firefox, explorer and opera... the four browsers doesn't recognize the font...
here is my CSS code...
#media screen, print { #font-face {
font-family: 'FUFONT';
src: url(../fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), url(../fonts/ScheherazadeRegOT.ttf) format("opentype");
font-weight:bold; } }
and call it as follow...
.navigation ul li a {font-family: FUFONT, Arial, Helvetica, sans-serif; font-size:18px;}
what do you think the problem is?
The short answer: till now there is no generator for arabic fonts so we can use it in web.
Farther explanation: when using http://www.fontsquirrel.com/fontface/generator
with Expert:
Subsetting: No Subsetting.
CSS Formats: Smiley
you'll be able to see your Arabic font in the web pages with one problem: no letter reshaping which means that the letters of one word will not be joint together, because there's no generator till now support the required OpenType functionality for Arabic language.
Now you can use Amiri Font ( http://www.phpandthecity.com/2012/12/use-font-face-with-arabic-font.html )
Solution :
1- goto >>> http://www.fontsquirrel.com/fontface/generator
2- upload your font on expert mode
3- check only those values :
--------> Font Formats: woff
--------> Truetype Hinting: Font Squirrel
--------> X-height Matching: none
--------> Subsetting: No Subsetting
4- Download your files
5- past this code into your css file :
#font-face {
font-family: 'Name of your font';
src: url('url to your font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
6- call your font and apply it on some element
ex :
h1{
font-family : "name of your font" ;
}
Enjoy it !