I'm using a CMS and therefore can only amend the CSS file. I have the following code in that file:
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.h1_section_hero {
Font-family: 'Montserrat';
}
</style>
However it's not changing in the browser. I'm assuming that I don't have to download the font as i'm importing it within the file? thanks
It looks like your google font link is invalid, you are missing a ? between css2 and the family key:
'https://fonts.googleapis.com/css2?family=Montserrat&display=swap'
If you were to open both urls into your browser you will see that your original url is broken, and that the correct one above shows the fonts.
Create a separate link to the stylesheet rather than trying to import. The markup below is taken from the Google Fonts API doc and works just fine in my browser:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Related
Thankyou for your precious time;
i'm a beginner in web development and as i was trying my hands on html and css
i found that the css styling isn't getting applied to the html and that the chrome
developer tools shows it to be empty (the file is present but the code that i've written in css file seems to be absent)
please help!
index.html file
<!DOCTYPE html>
<html>
<head>
<title>MY WEB PAGE </title>
<link type="text/css" href="style.css" rel="stylesheet" >
</head>
<body>
<h1>THIS IS MY WEB PAGE </h1>
<p>
css applied to this part of the code isnt being shown in the developers
tools
</p>
</body>
</html>
style.css file
body{
background-color:black;;
}
h1{
color:white;
font-style: italic;
font-family: sans-serif;
}
p{
font-family: serif;
color:yellow;
font-style: oblique;
}
You may be missing an angle bracket on your first line or it could be a copy-paste error. It should be: <!DOCTYPE html>
Also look in the Network tab in Chrome toolbar to make sure that it's able to find your style.css and it contains the right CSS.
Depending on how it's being hosted, you may have to hit Ctrl-F5 to tell the browser to download everything fresh instead of caching.
Clear the browser cache. It happens sometimes.
https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
you have to save css and html file in a same folder as your writed
I am using Laravel 5.1 SnappyPDF wrapper, which is using WKHTMLTOPDF library. I am trying to include some custom google fonts for my PDF file, but those fonts are not working in generated PDF file.
I tried, converting fonts into Base64 and also tried to include fonts by absolute URL and relative URL, also tried many answers available at stack overflow but none of them worked for me. How to fix this issue.
//Calling fonts
#font-face {
font-family: Roboto Condensed;
src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
#font-face {
font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}
#font-face {
font-family: 'Open Sans Semi Bold Italic';
src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}
//implenting fonts
.report-page2-col-wrapper .col-heading{
font-family:"Open Sans Semi Bold Italic";
font-size:12pt;
line-height:17pt;
}
see difference in screen shots
1) This is web browser HTML version, looks find and fonts implementing properly
2) This is Generated PDF version, fonts not applying properly
There are multiple solutions to accomplish this:
1) If you use google font, try below:
Use <link> to include google font
<link href='http://fonts.googleapis.com/css?family=YOURFONTFAMILY' rel='stylesheet' type='text/css'>
Use <style> to apply font effect
<style type = "text/css">
p { font-family: 'YOURFONTFAMILY'; }
</style>
2) Encode font with Base64 encode tool and use it in css
#font-face {
font-family: 'YOURFONTFAMILY';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
Hope one of the above is your solution!
Taken ref: use custom fonts with wkhtmltopdf, helvetica font not working in wkhtmltopdf
In addition to AddWeb, you have to add to HTML header META with unicode information
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
I am trying to use a custom web font on a GitHub page using #font-face in my CSS. I created a folder in the repository and uploaded the .woff-file of the font I want to use. However, I seem to be unable to properly link the font. Below you'll find the very basic HTML and CSS I am working with.
In my GitHub page ( [username].github.io ) it is possible to simply link a stylesheet, since it is sitting in a folder in the same directory as index.html:
Now, why do I seem to be unable to link a .woff-file also sitting in a folder in the same directory?:
I tried to do so by linking to the font via #font-face and using Assets/AkzidenzGrotesk-Regular.woff as the url. Yet, the site refuses to use the font and falls back on Times, as specified in the CSS.
Can someone help my out and explain to me, why this is happening? How do I have to link the font-file in order to use it on the site?
My Index file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/basic.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<h1>Personal HTML-Projcet</h1>
<p>Personal web design project, hosted via GitHub-Pages.</p>
<div class="grotesk">
<p>This is a test, using Akzidenz Grotesk as a webfont.</p>
</div>
</body>
</html>
And the respective CSS:
#font-face {
font-family: AkzidenzGroteskRegular;
src: url(/Assets/AkzidenzGrotesk-Regular.woff);
}
body {
background-color: white;
font-family: 'Work Sans', sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
.grotesk {
font-family: 'AkzidenzGroteskRegular', 'Times';
}
Make sure you refresh your cache, because everything I see on j0hnga1t.github.io shows that the Berthold Akzidenz-Grotesk Regular font is used.
I have installed google font roboto on my machine, I am also including
<link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesheet' type='text/css'>
in tag of my welcome.html file .
and in css file I am using css like
.mycss{
font-family: "robotoregular","sans-serif","arial";
font-size: 13px;
}
Its working fine in development mode, but when I deploy it on tomcat font size is 2-3px large than development mode. I don't know why its coming. can somebody help me to get out of this? Also how to import Google font in gwt.
Thanks,
First of all, it should be:
font-family: "Roboto", sans-serif;
You can include Google font in your GWT html file the same way as you did for your welcome.html. This is the link that Google recommends (you can choose your own font weights, of course):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
I am trying to use Nastaliq Unicode NFL and the Jameel Noori Nastaleeq fonts for displaying text in Urdu in the browsers. But it isn't displaying properly in any of the browsers.
Please suggest a mechanism through which I can display the text in the same format as is displayed in the below site:
http://www.urdupoint.com/
Thanks,
Waq
here is the code for that font-family:
http://cdn.urdupoint.com/daily/font-styles/nafees_web_naskhshipped.eot
Now, you can use: #font-face to apply this to use own website.
You should have seen this code in the website's HTML Inspector. It was just there at the end of the code.
For #font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
From Notepad++ you can simply write Urdu just like English
<span style="font-size:13px;padding-left:53px; font-family:Nafees Nastaleeq;"><i> براے مہربانی اپنی باری کا انتظار کریں </i></span>
To add other font family,
See this link
http://font.urduweb.org/
Add Jameel Nooriee Css Font Family in css. Then Try it
.urduh {
font-family: Jameel Noori Nastaleeq;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p class="urduh" >زندگی میں بہت سی پریشانیان آ سکتی ہیں</p>
</body>
</html>