I want to use 2 fonts at the same time for English and Arabic characters. Haven't been able to figure out how to do it :(
These are the fonts I'm trying to use.
Arabic: https://fonts.google.com/specimen/Almarai?query=almarai
English: https://fonts.google.com/specimen/Raleway?query=raleway
On web, it would be as simple as font-family: Raleway, Almarai, sans-serif, Arial;
If anyone knows how to do it, I would really appreciate the help!!
#import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Almarai&family=Raleway&display=swap');
body {
font-family: 'Almarai', sans-serif;
}
h2 {
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World! is in this font style and I am too!</h1>
<br>
<h2>I am styled as RALEWAY</h2>
</body>
</html>
Explanation: Google fonts provide rules to specify in CSS to import it as you do it also specifies how you use the font in this example I've demonstrated how. you use the import("font link here") to import the fonts or you could link them in the head. then you use the font-family: 'font name here' with an element {} to specify that the font is active. Then that element should be in that font.
Related
I use html-pdf to convert my html to pdf. But when I include my font as
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800&display=swap" rel="stylesheet">
And write in css:
html {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 14px;
}
It renders my font as italic. But in HTML it is normal font. How to solve it? I tried font-face, it did not work
I have a stencil component that I want to set a font to.
What I have now:
index.html
<body>
<sidebar-component webpagename="dashboard"></sidebar-component>
</body>
<style>
* {
margin: 0;
font-family: Lab_Grotesque_Light;
}
#font-face {
font-family: 'Lab_Grotesque_Medium';
src: url('./assets/fonts/Lab_Grotesque_Medium.otf');
font-weight: normal;
font-style: normal;
}
</style>
This sets the font when I start my component locally.
But I want to use the component in a Vue application (imported from npm). There the custom font wont work. Is there another way to implement this.
This is covered in the docs now. You can save the font to your src folder and reference it directly. https://stenciljs.com/docs/local-assets
Update: Actually it looks like there is an issue where it is not possible to load custom fonts within a Shadow DOM https://github.com/ionic-team/stencil/issues/2072
If I put the #font-face{} in the header of the index-file. It actually worked from my other applications that uses the stencil component.
In index.html
<head>
<style type="text/css" media="screen, print">
#font-face {
font-family: "LabGrotesque-light";
src: url("../assets/font/lab-grotesque-light.otf") format("opentype");
}
</style>
</head>
You have to manually define the font face in your Vue application to make this work. Just like you did in the index.html of stencil.
If you dont want to include the font assets in you vue application you can either copy the font assets with https://stenciljs.com/docs/copy-tasks or https://docs.npmjs.com/files/package.json#files to your npm package.
Why the cfhtmltopdf does not display the googleapis font?
<cfhtmltopdf encryption = "AES_128">
<html>
<head>
<!--Add GoogleFonts-->
<link href="https://fonts.googleapis.com/css?family=Aguafina+Script|Alex+Brush|Bilbo|Condiment|Great+Vibes|Herr+Von+Muellerhoff|Kristi|Meddon|Monsieur+La+Doulaise|Norican|Nothing+You+Could+Do|Parisienne|Permanent+Marker|Sacramento|Yellowtail" rel="stylesheet">
</head>
<body>
<p id="displaySignature" style="font-family: Meddon, cursive; font-size: 30px;">Test</p>
</body>
</html>
</cfhtmltopdf>
It ignores the font style.
You can goto the ColdFusion administrator -> Server Settings -> Font Management and import the fonts that are required by you and try.
If you look at this answer, using
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
will import the contents of the CSS file into your HTML. Using #import will actually "defer the loading of the included resource until the file is fetched", which may be exactly what you need.
I generate pdf from xhtml file but font style is differs with XMHTL.
Here is Java Code
ITextRenderer renderer = new ITextRenderer();
renderer.getFontResolver().addFont("C:/Windows/Fonts/times.TTF", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
renderer.setDocument(urlXhtmlFile);
renderer.layout();
renderer.createPDF(os);
os.close();
How to set font style of pdf and html is same (color). Thanks!!!
You should add CSS into your XHTML, there you can manipulate with font size, color etc (change font properties according to your needs):
<html>
<head>
<style type="text/css" media="print">
body {
font-family: "Times New Roman", Times;
font-size: 10pt;
color: blue;
}
</style>
</head>
<body>
</body>
</html>
Also, I suggest you embed font into PDF, as someone opening this PDF without this font installed would not see PDF properly.
(This question is a follow up from Safari Scrollbars & SVG - the workaround suggested was to use javascript, but Safari is not responding even to javascript. Or even straight css.)
I am unable to get a fully sized svg from Safari. It refuses to enlarge at all. I want the min-width to follow the jquery window width but it ignores the javascript (other browsers seem fine) and then even if I change the css directly it ignores even "width: 700px;"
SVG File
viewBox="0 0 800 800"
(no height or width specified)
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.objectwrapper{
max-width: 80%;
margin-right:auto;
margin-left:auto;
}
.objectdiv{
max-width: 100%;
margin-right:auto;
margin-left:auto;
display:block;
}
.svg{
width:100%;
display:block;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
var sixtypercentInnerWidth = .6*$(window).width();
$("document").ready(function(){
$(".objectwrapper").css("max-width",sixtypercentInnerWidth);
});
</script>
</head>
<body>
<div class="objectwrapper">
<div class="objectdiv">
Object4
<object class="svg" type="image/svg+xml" data="question0optimize1.svg" >
</object>
</div>
</div>
</body>
</html>
EDIT
I've just found that editing the .svg is getting some response...
$("document").ready(function(){
$(".svg").css("width",sixtypercentInnerWidth);
$(".svg").css("height",sixtypercentInnerWidth);
});
I needed to add HEIGHT as well as WIDTH.. so it seems SAFARI can't do svg %'s???????
Safari is absolutely capable of sizing SVG elements using CSS. I do it every day :)
The reason that your
.svg{
width:100%;
display:block;
}
isn't applying is because your objectwrapper and objectdiv elements don't have an explicit width in CSS. A max-width is not enough. Give those parent elements an explicit 100% width and that should solve things. No need to go round the bend with JS on this one.
A few related points:
a) Jquery selectors and functions generally don't play well together with SVG. I've used the jquery animate method on a path attribute, but that's about it. Everything else fails. You will need to write vanilla js to do much of anything with SVG.
b) Troubleshooting SVG is way easier in Chrome. Dev Tools still has some weird bugs with SVG that are being worked out, but generally if it works in Chrome it works in Safari.
In my opinion safari is perfectly capable of doing svg, either on os x, windows or ios. I don't use but and I find JQuery sometimes not behaving intuitive with svg.
On animation I do even some javascript backed animation, working in all browsers but MS IE.