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.
Related
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>
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 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">
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}
I downloaded the fonts from the url the google css provided so I could use it without being online. The code works when clicking the .html file and opening it in a browser. However, when I place all my files on a local webserver it does not work.
Any ideas? Keep in mind, I will not be connected to the internet.
Adam there might be various reasons for this behavior as #Kyle suggested
First i would check the url to the font-file resolves correctly. From your CSS declaration above it seems that browser will expect the file to be present in same directory where CSS exists
Second and yes google might have blocked leeching/downloading the files. Only way to check this is first use the font to be loaded from google service 'Note the size of the file' then download and check the size. If they are same they do allow download
Third webfonts need to be browser specific here is the explanation from themselves
When a browser sends a request for a Font API stylesheet (as specified
in a tag in your web page), the Font API serves a stylesheet
generated for the specific user agent making the request.
so each time your browser requests the font you are actually downloading a small CSS snippet and then the Font family from the directory
Its strange if the font works fine on computer by opening html file, but not with the localhost. Are you sure you are copying all font files and placing in the same directory? Since the file name is so complicated and long, may be you are doing some mistake with the names? Are you using same browser?
And no, There is nothing like Google does not let downloading the files. Just to make sure, I have downloaded a font (GloriaHallelujah) from google fonts and tested with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google font test</title>
<style type="text/css" media="screen">
#font-face {
font-family: GloriaHallelujah;
src: url('GloriaHallelujah.ttf');
}
h1 { font-family: GloriaHallelujah, helvetica, arial; }
</style>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
This work fine on desktop, as well as local host. May be you can download same font from here, place in the same directory and then test on your localhost and see.
On my Windows 7 IIS server I had to add woff in the mime types to get them to work.