I am rendering some HTML using WebView based on EFL WebKit in Tizen 2.4 and 3.0 SDK.
<div className="hexArea" id="hexArea1">
Content
</div>
and corresponding CSS:
.hexArea {
position: relative;
height: 95%;
padding: 3px;
white-space: pre;
text-overflow: clip;
overflow: auto;
border: 1px solid #0F0F0F;
color: #0F0F0F;
font-family: "Lucida Console", "Courier New", Courier, monospace;
}
While this works perfectly well on several platforms such as Desktop, Android WebView, iOS WebView, it does not show fixed-font on the Tizen App. I can't seem to set font for anything on the page.
I tried style="font-family: 'monospace'" on the div, I tried to make the CSS just font-family: monospace, but the html on the Tizen WebView just does not seem to honor font-family.
I am trying to display bytes in hex and decimal, and it looks horrible with normal font. Any ideas how to fix it?
EDIT: I even tried <pre> tag but shows in normal font.
Currently, Fixed font resources seem to be not provided in the Tizen SDK by default. But it's possible to display a fixed-font in app side using CSS #font-face or the Google Font API.
Use CSS #font-face with font resource.
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I think you can add a fixed font resource in your app and load and display the font using CSS #font-face.
Use Google Font API.
https://developers.google.com/fonts/docs/getting_started
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto Mono">
<style>
.hexArea {
font-family: "Roboto Mono";
}
</style>
</head>
<body>
<div>normal font:1234567890</div>
<div class="hexArea">fixed-font:1234567890</div>
</body>
</html>
Related
I am having trouble rendering Poppins on my site the way it renders on Google fonts demo site.
When using a non-retina display it renders "too thin", for example, the bars on the T are only 1px high, instead of 1.5px high when I look at the same text on font.google.com.
I like the way it looks on Google fonts much better. On my site the font looks "chopped" at the top but I cannot figure out what they are doing in their HTML to get a different rendering.
This codepen demonstrates the issue but beware: you need a non-retina display to see the issue!
Code:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet" />
</head>
<style>
body {
margin: 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 18px;
}
main {
display: grid;
grid-template-columns: 20% 30% 40%;
column-gap: 5%;
align-items: center;
}
h2 {
font-size: 1.2em;
font-weight: normal;
align-self: center;
}
a {
color: #000;
}
small {
display: block;
font-weight: normal;
font-size: 12px;
}
img:first-of-type {
grid-row-end: span 2;
}
</style>
<body>
<h1>⚠️This issue is only visible on non-retina display!</h1>
<main>
<h2>
Browser rendering
</h2>
<div>
TITLE TEXT HERE IS 18<br />
<small>^^^ T bars will be too thin on non-retina browser</small>
</div>
<img src="https://i.imgur.com/7LyzjJy.png" />
<h2>
Screenshot of Chrome on MacOS (broken)
</h2>
<div>
<img src="https://i.imgur.com/2OZ0wv6.png" />
<small>^^^ Notice how the T bar is too thin.</small>
</div>
<h2>
Google Fonts<br />
(screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght#400;700&sidebar.open">
the demo page</a>)
</h2>
<div>
<img src="https://i.imgur.com/dgld0Jw.png" /><br />
<small>^^^ Notice how the T bars are thicker</small>
</div>
<img src="https://i.imgur.com/pQPZ6Ch.png" />
</main>
</body>
</html>
I see your point,
it seems that there are some issues with the latest version of this font, others have complained too.
now why it is rendered okay on google? it could be that the demo version google script is using isn't the same as the one on their fonts CDN though I'm not sure
Solution:
until they fix the issue, Use Webfont
same font same CSS as the one in your pen
except this is an older version, you can host it on your own server
using something like webfont (I believe you know how to do that but in case you don't)
fontsquirrel makes the proceedure dead simple.
BTW this is on a mac and a separate HD screen
Note:
I noticed a tiny bit of spacing between the letters/words but nothing that
can't be fixed with some CSS letter-spacing or word-spacing
First thing - since macOS Mojave, Apple has disabled font smoothing by default. This is hard to notice on Retina Displays, but easy to notice on non-Retina. Executing defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO and logging out mostly fixes the problem. Without font smoothing text look a bit smaller.
The second problem seems to be in the way Google Fonts are working. When you type the preview text on Google Fonts demo page you are loading only characters you need for this given text - this is to save bandwidth as you are going to download about 18 styles of it.
However the font seems to be just a little bit different.
Google Fonts embed
Poppins downloaded from Google Fonts, imported manually via #font-face
Font constructed by Google Fonts downloaded from the network page on developer tools
1 and 2 look identical. The difference in 3 is almost unnoticeable, except for letter T and E.
Please also note that on Google Fonts demo page text is rendered with -webkit-font-smoothing: antialiased; which usually makes the text seem a bit smaller, maybe this is why the generated font is a bit bigger.
This can be noticed if you have Poppins cached and change the font manually from generated one to real Poppins.
This is my take on this problem, but on the way to it, I also found that sometimes subpixel rendering was present.
I was trying to add a custom font to my Neocities site, so I used the following css code in my style.css file:
body{
font-family: statusplz;
font-size: 10px;
}
p {
}
html {
background-color: #000100;
color: #999999;
font-size: 14px;
}
h1 {
color: #990033;
font-size: 28px;
}
hr {
color: #660033;
border-color: #660033;
background-color: #660033;
}
h2 {
}
#font-face {
font-family: 'statusplz';
src: url('https://vaguesoft.neocities.org/statusplz.ttf') format("truetype");
}
The custom font does not display in any browser other than Edge. I've used other sites with custom fonts on Firefox, and Chrome. I viewed the css files for those sites using the firefox dev tools, and they also used ttf files and #font-face, but actually worked. I don't know why the font isn't showing up in other browsers. I don't know if the problem is in the css file, the font file, or the html of the site. It was working at some point. It works on one of my computers, but that machine already has the font installed. Maybe I'm not handling frames properly (I do have a sidebar)? Any help would be greatly appreciated. Here's a link to the site: https://vaguesoft.neocities.org/
I want to use this early access Google Font:
https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft
on my tumblr blog:
https://muneebkablog.tumblr.com
The theme installed is this one:
https://www.tumblr.com/theme/38737
It does support Google Fonts, but I do not know how to use an early access Google Font.
I have tried adding this after < head >
http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css' rel='stylesheet' type='text/css'>
but then I did not know how to edit the following html to use this font. Here's the code in the html.
html {
font: 175%/1.5 {block:ifGoogleWebFont}{text:Google Web Font},{/block:ifGoogleWebFont} Avenir, Arial;
-webkit-font-smoothing: antialiased;
}
Alternatively, I searched the web and came to know one can add custom CSS, so I tried to add the following code into 'Add Custom CSS':
#import url(http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
body {
margin: auto;
margin-top: 2em;
margin-bottom: 10em;
}
*[lang=ur] {
direction: rtl;
font-family: 'Noto Nastaliq Urdu Draft', serif;
}
but again nothing seems to be working.
You might have noticed by now that I am not a coder at all. I am just a casual blogger trying to deal with html and CSS codes.
Any help is much appreciated :)
To use any Google font, just use the code snippets that are provided on the web site. In your case, add these lines to your css file:
#import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
You have done that already!
Source: https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft
Your example code then applies this font only to elements that include the lang property, i.e. <p lang="ur">.
*[lang=ur] is called a (CSS) selector, the * is basically a wild card, that selects all elements - which has been modified to only match certain elements.
My guess:
There is no lang attribute in your html code - but I can't tell for now, because you haven't posted any code.
#Muneeb Ahmed, #elasticman is correct
Here is the working code with Google Fonts Early Access https://fonts.google.com/earlyaccess
<html>
<head>
<style>
#import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdu.css);
body {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 36px;
color: blue;
text-align: right;
}
</style>
</head>
<body>
<div>السلام علیکم<br>خوش آمدید </div>
</body>
</html>
I am using a font through edge fonts and am hosting the static html page through github pages. However, when I look at the link, the h1 font has changed. When I look at it in my local host, it has the correct font. Does anyone know how to correct this?
In my index.html
<script src='http://use.edgefonts.net/londrina-shadow.js'></script>
<style>
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
</style>
<h1>TITLE</h1>
Set the H1 code in the .css page, not the HTML.
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
Put that in the .css page and see what happens. Also eliminate the h1 font-family preset from the Github theme.
I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;