I am trying to use the font Lato Regular in my html/css. The problem is, whenever I load the html file, it shows the regular font (in blahblahblah). I inspected that element, and it detects that the font-family should be 'LatoWeb'. However, LatoWeb shows the regular system font. I am running this in Linux Firefox btw
This is my HTML code (html code is saved under app/views/static_pages)
<!DOCTYPE html>
<html>
<head>
<title>UPrint</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/Semantic-UI-CSS-master/semantic.min.css">
<script type="text/javascript" src="../../assets/stylesheets/Semantic-UI-CSS-master/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/landing.css">
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/latostyle.css">
</head>
<body>
<div class="landing-page-description">
<img class="ui centered medium image" src="../../assets/images/logo.png">
<p class="regular"> blah blah blah</p>
</div>
</body>
</html>
This is my css code filename landing.css (css codes saved under app/assets/stylesheets)
(Fonts are saved in app/assets/fonts)
#font-face {
font-family: 'LatoWeb';
src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/Lato-Regular.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
body {
background-color: #3fabad;
}
.landing-page-description {
position: relative;
}
.regular {
font-family: 'LatoWeb';
}
Please try !important. I'm not sure it's working or not. but u should try. because the default fonts overwrite our own fonts.
I was able to get a Google font for Lato. It seems that using a font from your computer is a problem with Mozilla Firefox :( have to edit about:config
This should be comment but not enough reputation
Check in your browser console (Firebug) if your paths are resolved correctly.
Related
I used SourceSansPro to match the font in design, FF, Safari seem ok. Chrome and IE 11 have issue.
Here is the design for the font (due to proxy, cannot upload, but have a look at FF and Safari)
Here is code:
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
type="text/css"
/>
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
It seems the bold is quite different in IE and Chrome.
In summary, need to make the font style in IE and Chrome, same as FF and Safari.
By default, the code you're using there only include the 400-weight font, and browsers have different reactions when trying to get a bold version of a lighter font - some make it bold themselves, or just load a different font. In order to load the font weights you want (along with italic versions), you can use a line like this:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
With the versions/weights separated with commas.
If you go to the Google Font page for this, you can click "Customize" to select which fonts to include, and it'll generate the embed code for you.
You can use this code
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" type="text/css" />
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
The main problem was that the font was displayed differently than it should, although everything was connected correctly.
I managed to find the source in html and css where it is shown how to use this font and it began to appear as it should.
The only suggestion as to why the font did not work is that this font in ttf format does not work on the web.
Thank u everyone for the help!
/* #### Generated By: http://www.cufonfonts.com #### */
#font-face {
font-family: 'Voya Nui';
font-style: normal;
font-weight: normal;
src: local('Voya Nui'), url('VoyaNui_1.15_4.woff') format('woff');
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="font-family:'Voya Nui';font-weight:normal;font-size:65px">018.0204 BIOLOGICAL CHRONICLE</h1>
</body>
</html>
You can't do <link rel="stylesheet" href="fonts/VoyaNui_1.15_4.ttf">.
You need to use #font-face in css or style.
#font-face {
font-family: 'VoyaNui';
src: url('./fonts/VoyaNui_1.15_4') format('woff2'),
url('./fonts/VoyaNui_1.15_4') format('woff'),
url('./fonts/VoyaNui_1.15_4') format('ttf');
}
One more thing, I use woff and woff2, because it has a good compression, but be careful with some browsers (IE).
See in caniuse https://caniuse.com/#search=woff and https://caniuse.com/#search=woff2
Assuming your pasted stylesheet is styles.css, add the font-face definition before your body rule:
#font-face {
font-family: 'VoyaNui',
src: url('fonts/VoyaNui_1.15_4.ttf');
}
body {
font-family: 'VoyaNui';
}
Then remove the <link> to the font, it will not work.
You need to generate the fonts from online web font generator and after the generation of fonts put the woff and woff2 generated fonts in your fonts folder.
#font-face {
font-family: 'VoyaNui';
src: url(./fonts/VoyaNui_1.15_4) format('ttf'), url(./fonts/VoyaNui_1.15_4) format('woff'), url(./fonts/VoyaNui_1.15_4) format('woff2');
}
I'm trying to convert HTML code to JPEG image. It kinda work, but it doesn't when I try to do it with barcodes.
Server side, I'm using :
I'm encoding an EAN133 barcode with CODE128 protocol, it works when I want to show it on a web page (I use HttpUtility.HtmlEncode(code_barre) so the barcode is well interpreted), then I'm using a barcode font to display the barcode, and that's where something is wrong with my image :
As you can see, it's a barcode "plain text" in the good format, and with the following CSS:
#font-face { font-family: 'code_128regular'; src: url('/Assets/Fonts/code128-webfont.eot'); src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg'); font-weight: normal; font-style: normal;} .test{font-family:'code_128regular'; font-size:70px;}
I should become this :
But it doesn't, even if I import Bootstrap CSS with relative path, whereas it works when I try to generate a PDF with IronPDF
thanks for attention
EDIT : here's the HTML generated :
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel='stylesheet' type='text/css' href='Assets/Bootstrap/css/bootstrap.min.css'>
<script type='text/javascript' src='Assets/Bootstrap/js/bootstrap.min.js'></script>
</head>
<style>
#font-face {
font-family: 'code_128regular';
src: url('/Assets/Fonts/code128-webfont.eot');
src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg');
font-weight: normal;
font-style: normal;
}
.test {
font-family: 'code_128regular';
font-size: 70px;
}
</style>
<center><p class='test'>ÌMXCUTGRIP305-07DÎ</p><p>MXCUTGRIP305-07</p></center>
</html>
NReco ImageGenerator internally uses wkhtmltoimage command line tool so actually you can expect the same behavior. In your case it seems your custom font is ignored by wkhtmltoimage for some reason; first of all try to use woff, woff2 or ttf font files instead of eot. If you use "GenerateImage" method which accepts HTML as .NET string all external references should be absolute.
The following HTML template works fine for me (I've used "Libre Barcode 128" from google fonts):
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Barcode+128&lang=en" />
</head>
<style>
.test {
font-family: 'Libre Barcode 128';
font-size: 70px;
}
</style>
<center><p class='test'>ÌMXCUTGRIP305-07DÎ</p><p>MXCUTGRIP305-07</p></center>
</html>
I trying to use local font to apply styles in html, below is the code.Font is not getting applied for harlow class used element
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src:local("C:\Users\Website\fonts\Harlow_Solid_Italic.ttf");
}
.harlow{
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
I made the following changes and I got the result
Quotation marks for font-family
Using of URL instead of local
Changing of "\" to "/"
Note:
Use of the local css function throws an error in the developer console saying resource is not loaded. See the modified code below.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: "myFirstFont";
src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}
.harlow {
font-family: "myFirstFont";
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
Use the correct path for file.
your path does not work on the host. because your host has no drive 'c:/...' or anythings like this.
so you can use
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src:url("/fonts/Harlow_Solid_Italic.ttf");
}
.harlow{
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
Use font face in all the format types according to the browser compatibility
Just add bellow code before all the styling of your css file and then you can use this font family for any selector inside within your css file.
#font-face {
font-family: 'CustomHeading';
src: url('./fonts/SFAtarianSystem.ttf') format('embedded-opentype'), /* Internet Explorer */
url('./fonts/SFAtarianSystem.ttf') format('woff2'), /* Super Modern Browsers */
url('./fonts/SFAtarianSystem.ttf') format('woff'), /* Pretty Modern Browsers */
url('./fonts/SFAtarianSystem.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/SFAtarianSystem.ttf') format('svg'); /* Legacy iOS */
}
You can do that with this code. I tried it on multiple sites and it worked pretty well.
#font-face {
font-family: myFirstFont;
src:url("D:\Files\Design\Fonts\SF-Pro-Text-Font-Family");
}
* {
font-family: myFirstFont !important;
}
first of all, i want to say that i searched and found many questions like this, and i almost tried every way of solving the problem. but they didn't work. and please consider that this problem is not for all of the pages in firefox. it's just for 1 page.
i have a very simple html page like this :
<html>
<head>
<meta charset="utf-8">
<style>
#font-face{
font-family: 'BYekan';
src: url('http://bloglikecms.com/tempblogfa/BYekan.eot?#') format('eot'), /* IE6�8 */
url('http://bloglikecms.com/tempblogfa/BYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('http://bloglikecms.com/tempblogfa/BYekan.ttf') format('truetype'); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}
body{
font-family: 'BYekan',tahoma !important;
text-align: right;
}
</style>
</head>
<body>
<p>سلام</p>
</body>
</html>
In safari, it works well. but in firefox, it doesn't show my custom font. this problem is just for this page. i visit many websites with custom fonts and firefox shows that pages correctly with the custom fonts. so i want to know why this happens with my page and where i did wrong.
Thanks in advance.
You can Download font files and save them in same directory where you have the html file and it will work for all browsers :
#font-face{
font-family: 'BYekan';
src: url('BYekan.eot') format('eot'), /* IE6�8 */
url('BYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('BYekan.ttf') format('truetype'); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}
Mention <!DOCTYPE html> and try once..