TL;DR
I want to set up a Jekyll webpage (al-folio template) with two languages in which
my Latin text renders as Roboto font,
my Arabic scripts renders as with the Google font I added (Noto Naskh Arabic), and
my code blocks be rendered with monospace font.
But I can only do two of the three above simultaneously. Help needed.
Context
I'm a newbie in HTML, Jekyll, sass, and all that. So I used al-folio template to build my personal site. It is important for me to write on it in both English and my right-to-left mother-tongue language (Persian with Arabic scripts). Aesthetically, the default Arabic font my browser renders is not pleasing. So I added a nicer Google font to my _sass/_base.scss:
font-family: 'Noto Naskh Arabic', serif;
Since the line above originally doesn't exist in the theme adding it also overwrites my English font. So, I resorted to including the correct Latin font name to the same line:
font-family: 'Roboto', 'Noto Naskh Arabic', serif;
Now, everything looks fantastic except my code block's font. Originally, its font was monospace, and I want them to stay that way. Unfortunately, I cannot fix the last bit. Seemingly, this multilingual need of mine messes up some theme settings in a way that either one or more of these requirements breaks. I specifically tried to enforce the default code block font by adding
font-family: monospace;
to this, this, and this lines, but had no luck. Seemingly, other elements' settings (particularly the highlight class) overwrite the font.
Any solution or workaround is appreciated very much!
Related
I'm using wkhtml2pdf and it looks like the renderer won't apply CSS font overrides from local fonts anywhere. It seems no matter what, wkhtml2pdf is using the default font, unless the font is explicitly #import()ed.
For the most part I'm OK with just a single font for the document, but it's annoying for code snippets when it doesn't render in a proportional font. I have font overrides for <pre> (and <pre><code>) like this:
pre, pre > code {
font-family: monospace;
}
I've also tried explicit fonts like Consolas, Menlo etc. which also doesn't work.
Here's what this looks like in the PDF:
As you can see the code block does not reflect the font change and renders in the document font, not monospace (or whatever other built-in font I might specify). Rendering the same in modern Chromium browsers renders the alternate font correctly.
I can get this to work however by use #import() and explicitly importing a Web font:
#import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,400;0,700;1,400;1,700&display=swap');
And then referencing that font in the CSS:
pre, pre > code {
font-family: "Source Code Pro", monospace;
}
While that works using Web fonts isn't an ideal scenario as it requires Web access.
Two questions:
Is there a way to get wkhtml2pdf to work with built-in fonts in CSS styles? If so how do these need to be imported
Why is monospace which should be totally generic not working in this case?
I'm using the Roboto Family of fonts. In general, it fits perfectly to all my needs except one. The length difference between ndash and mdash is to small. It is a very important aspect, because as a part of our services - we are helping editors, proofreaders, writers and typeseters.
To fix the issue, we adjusted the font and we hosted it on our server. Unfortunatly, this has an significant impact on page loading and rendering speed (even the preloading the font is done).
I would like to switch into CDNJS version of the Roboto font and I'm wondering if there is a CSS or CSS+JS way to fix the issue. The idea is to select all the ndashes on the site and to shorten all of them with either JS or CSS, to be exactly in the middle of the length between dash and mdash. In the origin Roboto font ndash is twice so long as dash but mdash is just a little bit longer than ndash.
An alternative is, to replace all the ndashes with an ndash from another font.
Any other ideas?
You mention replacing the ndashes and mdashes from another font.
Have you considered using the CSS font-face unicode-range property?
If you have a font that has the sort of size dashes you want you could substitute those for the dashes in Roboto.
I couldn't immediately find a font that had sufficiently different dashes to the standard ones to demonstrate, but here's the code from MDN which substitutes the ampersand in Helvetica with the slightly more flamboyant one from Times New Roman. This method saves having to do anything to your actual text.
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;/* 2013-2014 ndash and mdash */
}
div {
font-size: 4em;
font-family: Ampersand, Helvetica, sans-serif;
}
<div>Me & You = Us</div>
I'm using the following css:
#font-face {
font-family: 'bariol_regularregular';
src: url('Bariol_Regular.otf');
}
The font is being used and there are no errors on the page. When I add this custom font to text on the page it is visibly different to the default styling.
This is how the font should show:
However, this is how it is showing:
Pay particular attention to the apostrophe (') and the letter'g' where the most noticeable differences occur.
If I use a native app then the font shows correctly. The demo lettering on the site where I downloaded the font also displays correctly - https://www.dafontfree.net/freefonts-bariol-f64170.htm
Is there something I'm missing/not doing correctly?
The typeface has multiple glyphs available for various characters so you'll need to find the character codes.
I'm using Open Sans font from Google Fonts on one of my page, and altho I'm using almost the same style regarding the font as Google does, my diacritics are somewhat thicker than the rest of the letters:
(you can see the live version at www.cabsurf.com)
The only difference in my CSS is the way I declare the font family:
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
But it will look the same even if I leave only Open Sans in the declaration.
I've placed the same text in Google Fonts page above (using inspect element in Chrome) and the text is rendered correctly on their side, so I know the font is ok.
Any idea what am I doing wrong ?
EDIT:
Using Chrome 27 / Firefox 22 on MacOS X 10.8.4
Google will use any sub-set of the font it wants. Did you make sure to check the correct boxes when you got the code for it?
When I append <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>to your <head>, all the characters look correct.
Just make sure to check whichever sub-sets you need so you don't get unnecessarily large files.
I'm having an issue with a script font called Thirsty Script Bold that I'm using on my site. The letter spacing appears to be correct for some letters, but not for others. I haven't even touched the letter spacing though. You can see an example of it here:
http://oi40.tinypic.com/2wpikgw.jpg. As you can see, the end of the "e" doesnt fully merge with the "b" and the "b" is too far right to merge with the "s".
I have tried messing with letter spacing, but it just seems to worsen the problem.
Here's my css for the page-
p.websites{
font-family: ThirstyScriptBold;
font-size: 80px;
text-align: center;
margin:0 auto;
}
Here's my HTML for the page-
<p class="websites">Websites</p>
Here's my css for fontface-
#font-face {font-family: 'ThirstyScriptBold';src: url('ThirstyScriptBold.eot');src: url('ThirstyScriptBold.eot?#iefix') format('embedded-opentype'),url('ThirstyScriptBold.woff') format('woff'),url('ThirstyScriptBold.ttf') format('truetype');}
This looks like a design flaw in the font, but it may actually depend on lack of kerning. Most browsers do not apply kerning by default, though Firefox does. So you could first try whether adding the following helps:
p.websites {
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
font-feature-settings: "kern";
}
It is also possible that the software used to generate the web font versions destroyed the kerning table; this often happens. I would expect however that the Webfont package sold by fonts.com contains the WOFF, EOT, TTF, and SVG versions with kerning and other OpenType features properly included.
Unfortunately. I believe that is how the font is displayed. I recommend using another font that is similar, but works. You can find one for free at: http://www.google.com/fonts/
I ran into the same problem using the Thirsty Script web font. The foundry (Yellow Design Studio) stripped of all the OpenType features from the web fonts. This seems to have removed the kerning data.
"All OpenType features and all extended glyphs have been removed."
I solved the issue by using the Font Squirrel web font generator to make a new set of web fonts.
If you define an incorrect behavior, what you really need to do is notify the author (or vendor) of the font about the problem. On first, after fixing, you'll have a correct version of the font. On second, this will help other users of this font avoid the same problem in a future.