How to correctly use Ubuntu font - html

I tried to use the Ubuntu font in my page by adding a link:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Here is the CSS:
body{
font-family : Ubuntu;
}
It works but sometimes the font can't recognize slovak characters like "č, ž". These are a different font (not Ubuntu). For example in a mobile sized screen (when I push ctrl+shift+m in firefox = mobile view).
Do you know what the problem is?

I don't know about the slovak font showing it correctly. Maybe you need to add latin-ext (You need to check the latin-ext to see if it supports Slovak characters. But if you are getting wrong characters on different browsers, it is because you didn't explicitly set the charset. Add the following line to the header:
<meta charset="utf-8">
This will force the browser to show the website in UTF-8, which will fix your problem.

Note that the link to the font says "subset=Latin". This is usually sufficient for ASCII-only text; for characters with diacritics, you need latin-ext, which means "extended Latin characters." This set should cover pretty much all characters used in European, Latin-script using languages (not Cyrillic, obviously).
This is configurable in the "character set" tab in Google's font picker.

I apologize, the code for importing external provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

In case the viewers of the site doesn't have the Ubuntu font in their devices please add this code:
Importing from external Provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Then, add Ubuntu to your font family list:
body { font-family: Ubuntu, "Times new roman", Arial, San-serif, Ubuntu; }
Hope this helps.

Related

wkhtmltopdf always apply default font for Arabic characters

I have a text that can be edited in tinymce web editor. After finishing, the text can be exported to PDF file using wkhtmltopdf 0.12.5 (with patched qt) and snappy as the wrapper.
Now there is multiple fonts to chose from and after a little research I managed to make it so that the font will be rendered correctly after exporting to PDF for English. However, when the text is in Arabic it always renders with a default font and wkhtmltopdf ignores the font that was selected in the editor.
Here is the code:
$htmlString = '<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Book+Antiqua|Andale+Mono|Arial|Arial+Black|Comic+Sans+MS|Courier+New|Georgia|Helvetica|Impact|Tahoma|Terminal|Times+New+Roman|Trebuchet+MS|Verdana|Webdings|Wengdings&;subset=latin" rel="stylesheet" type="text/css">
<style>
p, h, div, tr, ul, ol{page-break-inside: avoid !important;}
</style>
</head><body>' . $request->content . '</body></html>';
$options = [
'enable-smart-shrinking' => true,
];
$pdf = App::make('snappy.pdf.wrapper');
$pdf->loadHTML($htmlString);
return $pdf->setOptions($options)->inline(date('d-m-y_h:i:s_a') . '.pdf');
Note that the font shows correctly in the editor on the browser but it doesn't get applied on the generated PDF document. The content of the page is a simple paragraphs and headers nothing too fancy like tables or images.
Page as html
Page As PDF
I tried adding the fonts then using #font-face and I also tired to changing the subset in the google fonts link to Arabic but nothing worked.
Please advise.
Thanks in advance :)
I encountered a similar issue while working on an Odoo Report which uses wkhtmltopdf 0.12.5. The solution that worked for me was to use #font-face and add the base64-encoded font file as source:
#font-face{
font-family: 'Arial';
src: url(data:font/truetype;charset=utf-8;base64,<BASE64 CODE HERE>);
}
/* apply the font to all */
html * {
font-family: Arial;
}
to get the base64 code, you may use a tool such as this or this. just upload the font file there and copy the output base64 code and put it in place of <BASE64 CODE HERE> in the above sample CSS

Using unicode characters in html page (Armenian translation)

I have a page where the content is in Armenian.
My question is, What steps do I need to take in order for the symbols to display correctly?
Currently, something like
"Պատվերների համար կարող եք զանգահարել"
produces
"ÕŠÕ¡Õ¿Õ¾Õ¥Ö€Õ¶Õ¥Ö€Õ« Õ°Õ¡Õ´Õ¡Ö€ Õ¯Õ¡Ö€Õ¸Õ² Õ¥Ö„ Õ¦Õ¡Õ¶Õ£Õ¡Õ°Õ¡Ö€Õ¥Õ¬".
As it stands right now, my page is pure HTML but I will be incorporating features built on Ruby/Rails and will also be translating that content in Armenian.
I have been reading about Rails Internationalization, but have never used it nor am I sure if that is the best/easiest option?
In my case works fine. Or you can use online converters to convert Armenian symbols to Unicode (in case of ANSI).
Should be working by adding <meta charset="UTF-8"> to the <head> of your HTML File and by using a font that supports Armenian Characters.
If you want to use a Webfont for this, for example Noto Sans from Google Webfonts should do the job.
Use this in your CSS
#import url(http://fonts.googleapis.com/earlyaccess/notosansarmenian.css);
body {
font-family: 'Noto Sans Armenian', serif;
}
Found here: https://www.google.com/fonts/earlyaccess
At first use "Brackets", then
<html>
<head>
<meta charset="UTF-8">
<title> Ինչ-որ կոդ </title>
</head>
<body>
Պատվերների համար կարող եք զանգահարել
</body>
</html>

CSS file not loading / displaying in Firefox

I'm creating a small one page website ..for the first time in quite a while.
It works fine on chrome & safari across desktop, tablet & phone but on Firefox (v20 for mac os) the CSS does not load (locally or online).
I have done some research & have checked / amended the following:
the encoding is "utf-8"
no difference / change when using absolute paths over relative.
path is correct, right down to the case sensitive name of the css file.
link type is specified (text/css)
cache has been cleared.. alot..
.. but still no luck, below is the line of code linking to the css & it is also live on http://www.louisetiernan.com
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
All help very much appreciated. Thanks.
You have typos in your CSS. Everything beyond the first typo is not executed:
What you have:
#font-face {
font-family: 'chaparral';
src: url('fonts/chaparralprosemibold.eot); /* IE9 Compat Modes */
}
#font-face {
font-family: 'chaparralr';
src: url('fonts/chaparralproegular.eot); /* IE9 Compat Modes */
}
Add the ' just before the )
#font-face {
font-family: 'chaparral';
src: url('fonts/chaparralprosemibold.eot'); /* IE9 Compat Modes */
}
#font-face {
font-family: 'chaparralr';
src: url('fonts/chaparralproegular.eot'); /* IE9 Compat Modes */
}
You forgot 2 instances of the closing ' in the url arguments.
Viewing the interpreted CSS in firebug, it appears that FF is having trouble with your #font-face declarations. Try removing them from styles.css to diagnose the problem. It's possible the interpreter doesn't like multiple src properties, or perhaps it is choking on the comments (although everything looks good to me [and Chrome and Safari...]).
I believe there are a number of errors in your CSS file which cause it not to be rendered correctly on the page. Please go to the following web site and validate your CSS code (paste it all right in there):
http://jigsaw.w3.org/css-validator/#validate_by_input
When I entered your css there 5 errors were located. Go through and fix each error and the css should show up and start working.
I believe the culprit is your / at the end of your tag.
Should look like this:
...type="text/css" href="styles.css">

Google web fonts diacritics display from other font

I used the Archivo Narrow font from the Google web fonts but the diacritics display from the body font which is Lucida Grande. So everything but the romanian diacritics (that i need) are shown in the Archivo Narrow font. And is not a problem of missing glyphs.
I have this in the <head>:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
and in css i call the font like this:
font-family:'Archivo Narrow', sans-serif; !important;
Change the href attribute value in the link element to
http://fonts.googleapis.com/css?family=Archivo+Narrow&subset=latin,latin-ext
as instructed in the Google instructions when you check the “Latin Extended (latin-ext)” checkbox. The exact meaning of this checkbox is undocumented, but apparently you should use this option whenever you have Latin letters beyond the Latin 1 (“Western”) repertoire

Opera not rendering certain characters from webfonts

Maybe it is not supposed to. But bear with me. I am using Google Web Fonts, and I am including PT Sans font like so:
<link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
and I even have .htaccess set like so:
<IfModule mod_headers.c>
<FilesMatch "\.woff$">
Header set Content-Type "application/octet-stream"
</FilesMatch>
<FilesMatch "\.ttf$">
Header set Content-Type application/octet-stream
</FilesMatch>
</IfModule>
Now PT Sans font does not include Baltic (ąčęėįšųūž) characters, which I am using. But Chrome, Firefox, IE render them all perfectly - not even using another font. Opera just skips them and leaves an empty space.
Just realized that it only does it with bold fonts. Check this example:
<!doctype html>
<html lang="en" class="no-js">
<head>
<title>Font test</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body style="font-family:'PT Sans';">
aceeisuuz<br />
ąčęėįšųūž
<p style="font-weight:bold">ąčęėįšųūž</p>
</body>
</html>
Now how do I fix it?
Looks alright to me, I just threw your example code into a jsfiddle. Maybe there's something else going on with your CSS/page?
http://jsfiddle.net/MetalFrog/gHhGv/
Since the PT Sans font does not contain the Baltic characters, browsers will use some fallback fonts. In the absence of declarations for this in the page style sheet, they will use their default methods, so browser differences are to be expected.
It is not clear why Opera sometimes fails here, but it is more important to provide some planned fallback. Either select a completely different font, or at least specify some alternate fonts in your font list, e.g. font-family: 'PT Sans', Arial, sans-serif. This prevents odd mixtures, like PT Sans and Times New Roman (the common default font) and may well circumvent the Opera bug too.
I've encountered same problem.
solution was:
Google Web Fonts page | Chose your cirilic Font | Quick usage | Verify your settings... -> add Cyrilic set to selection.
Clear Opera cache;