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.,
Related
I am using 2 #font-face on my index.css file with the purpose of using a font in regular weight and in bold weight as my default font in my entire application:
index.css file:
body {
padding: 0px;
margin:0px;
font-family: "LucidaGrande";
}
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}
Now, the regular weight seems to be working for the entire application, however, on an other part of my application I am trying to use the font in bold weight like this:
#presentation-text em{
font-size: 35px;
color: rgb(139, 59, 28);
font-style: normal;
font-weight: 900;
}
However the 900 i.e the bold weight is not being applied, still regular.
Am I using this correctly?
If you're using #font-face, never use local(...). The whole reason you're using #font-face is to ensure that you control exactly which font resource gets loaded for which (set of) font properties. The last thing you want is for the OS to black-box fetch you what it thinks the font is for the name you specified. Even if it really does find Lucida Grande for some user, there is zero guarantee it's going to be the same version you have installed on your development machine.
Interestingly that actually tangential to the real problem here: the way you've written your CSS right now means that, because you have the font installed locally, whatever follows local(...) will never even be looked at by the browser, similar to what happens when you're using font-family: serif, Times. The browser knows how to resolve the first thing, so it immediately stops: it already found what it needed to find.
Effectively your current CSS, running in a browser on your own machine, says this, as far as the browser is concerned:
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande);
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande);
}
So you're loading the exact same thing in both declarations. As CSS weights for the text shaper in the browser are entirely independent from the system text engine, the result is exactly what you're seeing: both rules declare the same font resource as the one to use when you say font-family: LucidaGrande, both with or without font-weight: 900.
Drop local(...) and it'll instead work exactly as you need it to.
Also, you'll want to turn those .ttf files into WOFF2 and then load those, because they're much smaller, as well as a promise to the browser that these are indeed unencumbered webfonts.
I'm trying to use fontlibrary.org to load fonts to produce documents as PDF. I currently use these same fonts on web sites and everything works as expected; however, when I try to print a document with these fonts, strong does not render bold and em does not render as italic. To work around this problem, I have to do this (this is already sass, so you can imagine the corresponding CSS):
body {
font-family: "HkGroteskRegular", sans-serif;
strong {
font-family: "HankenGroteskBold", sans-serif;
font-weight: bold;
}
em {
font-family: "HankenGroteskItalic", sans-serif;
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: "NormungRegular", serif;
strong {
font-family: "NormungBold", serif;
font-weight: bold;
}
em {
font-family: "NormungItalic", serif;
font-style: italic;
}
}
code, pre {
font-family: 'FantasqueSansMonoRegular', monospace;
strong {
font-family: "FantasqueSansMonoBold", monospace;
font-weight: bold;
}
em {
font-family: "FantasqueSansMonoItalic", monospace;
font-style: italic;
}
}
So that leaves me with a few questions:
How does this work at all on the web? How does the browser load the bold font for bold, the italic font for italics, and so on? Evidently, the browser simulates font variants for bold and italic, so it doesn't use the imported font variants.
Since this doesn't work for print, who's broken? Does fontlibrary.org serve the fonts incorrectly and the browser (and wkhtmltopdf) can't find them? Do both the browser and wkhtmltopdf load the font files incorrectly?
If fontlibrary.org is broken Since fontlibrary.org seems to use a font variant naming scheme that doesn't match what the rest of the world seems to except, then whom can I trust to serve these #font-face rules correctly? Do I have to write them myself to be sure?
Is there anything I can do to make this work better?
UPDATE: 2018-10-14. I have noticed that when I download the fonts so that they can be found locally, everything works. I suspect that this happens because the locally-installed font names follow a naming convention for the font variants that allows the browser, Print Preview, and pandoc to find them. I would really appreciate it if a few people would confirm that the naming convention solves the problem. In that case, I could tweak the #font-face rules to load the fonts from fontlibrary.org so that I don't need to install the fonts locally.
I believe that this is a result of how Fontlibrary shares their fonts. If you look at the file https://fontlibrary.org/face/hk-grotesk (which is the link containing the font face css) at the very bottom you will see a section marked "The following rules are deprecated."
If you use the font names from that section (i.e. "Hanken Grotesk") and not the special names (like "HankenGroteskBold"), then web browsers seem to find the correct bold & italic forms. It's only using these special names that I find trouble (in my case with the Libertinus fonts).
Unfortunately, as these names are marked "deprecated", I don't know how long they will stay working. Nor, do I know why Fontlibrary setup this naming convention, which makes it more difficult to use the fonts than is necessary (in my opinion).
I've just been playing with Google Fonts and found the Fira Sans font. It's nice but I don't like the Bold (700) style, it's too bold for my liking. However, if I select the Medium (500) style the browser doesn't use it for anything set to font-weight: bold (e.g. <strong>). Instead it uses some kind of faux bold that looks blurry.
I can go through my stylesheet and set every occurrence of bold to 500. I could also use Sass to set a variable like $bold-weight: 500; which helps if I decide to change the font later.
That's a bit of a pain though, plus bold is also the default for many browser styles (e.g. <strong>, <th>) so I have to make sure I catch every possible occurrence of that too. And there may be external scripts/styles I don't control.
Is there a way to make all occurrences of bold use weight 500?
Yes there is,
When you choose to quick use a google font, you are provided with a link to include into the header, Open the link into your web browser and you would be served with a css file with lots of
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
As you can see the font-style: italic and the font-weight: 400 is linked with some specific font (Roboto Italic here) within the #font-face tag, meaning whenever you use font-weight: italic with font-weight: 400 (or normal), it refers to the font described within the src attribute.
Now, if you want to make all the font-weight: bold in your css use this font face, just change the 400 in above font-style to bold and you are done.
Or you can make a duplicate of the complete #font-face{..} and use another font-style into it.
Also, you can use different fonts here as well. Make sure to keep only one font-style or font-weight tag within a #font-face.
This example here uses google fonts, you can use the same technique for self-hosted fonts.
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 */
}
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.