Why is my Google Font not loading through #font-face? - html

I created font face and applied it to the body:
#font-face {
font-family: 'Nosifer';
src: url('https://fonts.googleapis.com/css?family=Nosifer');
}
body { font-family: 'Nosifer' }
<body>
This is text.
</body>
However, the Nosifer font is not visible. What am I doing wrong?
Url to the fiddle: http://jsfiddle.net/9mr7973y/

Chrome gives the following warning in the console:
Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Nosifer
OTS parsing error: invalid version tag
The Google Fonts implementation guidelines for this font do not feature the use of #font-face. If you want to import it through CSS they advise using #import instead:
#import url('https://fonts.googleapis.com/css?family=Nosifer');

add this in html header
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
and apply font like
font-family: 'Nosifer', cursive;

Related

Import local fonts from relative path in HTML file are not working

I'm trying to import local fonts from a folder from relative path in my index.html instead of cdn url but its not working out. I have tried following
<link rel="stylesheet" href="assets/style/Material-Icons.woff2" as="font" cross-origin />
In the browser the fonts are loaded as i see them in the network tab with no error in loading. Also i am avoiding #font-face. Please guide me. Basically i am trying to replace following code:
#font-face {
font-family: "Material Icons";
font-style: normal;
font-weight:400
src: url ("assets/style/Material-Icons.woff2")
}
Make sure your font file is included in the project.
Also, try to specify the format like this -
#font-face {
font-family: "MaterialIcons"; // Removing space
font-style: normal;
font-weight: normal;
src: url("./assets/style/Material-Icons.woff2") format("woff2");
}
And use font-family: 'MaterialIcons' with these other font styles specified here. It should work.

font style not changing after adding font family in css

i have an html website, i am trying to change the fontfamily of a heading, i loaded the font file which is in my server and did the following code:
font-family: 'Berton Voyage Regular',sans-serif"
<link rel="stylesheet" href="http://molugu.com/yantraev/BERTON-VOYAGE-TRIAL.TTF">
but still the font family is not changing, can anyone please tell me how to change the font family, thanks in advance
You need to specify the font / url within the stylesheet, not try to link it as a stylesheet itself.
For example:
stylesheet.css
#font-face {
font-family: BertonVoyageRegular;
src: url(http://molugu.com/yantraev/BERTON-VOYAGE-TRIAL.TTF);
}
body {
font-family: 'BertonVoyageRegular',sans-serif;
}

Downloaded font not displaying in html file

I downloaded a font, the location of the file is correct but i dont know why it's not working:
<style>
#font-face {
font-family:"myfont";
src: url('fonts/Helvetica85Heavy_22449.ttf');
}
h1 { font-family: "myfont" !important }
</style>
<h1> Some text </h1>
Somehow the font is not being displayed. Any idea why this could be happening?
You may need to use a web font kit to convert it. Try uploading it here first then replacing it in your font directory.
https://www.web-font-generator.com/

Why does #font-face fail in my style sheet?

I want to specify a custom font in my style sheet. I can get the font to work in a link statement in my html header, but I'd rather put it in my style sheet. When I uncomment the link statement, it works. Here's my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Bug</title>
<link rel="stylesheet" href="fontBug.css">
<!-- <link href='https://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet'>-->
</head>
<body>
<p>This is normal text. It should display in a sans-serif font in black against white.</p>
<p class="customFont">This text should use the custom serif font, in a custom color</p>
<p>When I uncomment the link line inside the head tag of the html file, the
font works. I don't understand why it doesn't work from the style sheet.
I know it's using the style sheet because I get the custom colors.
</p>
</body>
</html>
Here's my .css file:
#font-face {
font-family: Metamorphous;
// I have tried it both with and without the format specifier.
src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}
.customFont {
font-family: Metamorphous, Sans-Serif;
background-color: #294575;
color: #6291D8;
}
body {
font-family: Sans-Serif;
font-size: 24px;
}
I think you might have implemented it the wrong way in your stylesheet. Try replacing
#font-face {
font-family: Metamorphous;
// I have tried it both with and without the format specifier.
src: url(https://fonts.googleapis.com/css?family=Metamorphous) format("truetype");
}
with
#import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
h1 {
font-family: 'Metamorphous', cursive;
}
That seems to work
#import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
h1 {
font-family: 'Metamorphous', cursive;
}
<h1> Test </h1>
#font-face is used to import your self designed font.
But Metamorphous is a web-safe font and it can be imported by using methods the other guy said already.
My problem was that I misunderstood the meaning of the url() function. I thought it was for a URL to a resource on the web, but it's actually for a path to a local file. It turns out that font-face is actually meant for fonts installed on the server, rather than accessed through a URL. People have been telling me it's for "self designed fonts." This includes, but is not limited to, fonts you designed. I didn't design the font, but I downloaded it to my development environment, and set the font-face url to the relative path to that file (relative to the .css file) and it started working. I don't know why they call it the url function, but the alternative, local(), is apparently for fonts installed in the local computer. Thank you to the two people who answered. Their answers guided me to this solution.

Unable to embed google fonts to HTML file using #import in CSS file

I am trying to learn web designing and currently I amd learnig HTML and CSS. I want to embed google's sans-serif font into my CSS file using #import and by placing it at the top of my CSS file in order to change my HTML page's fonts. but after saving and opening the Index.html file with various web browsers (Chrome, IE, opera etc.) I dont see any font change. But when I paste my HTML and CSS codes to http://codepen.io online editor the changes appear and I can see the font change.
I linked the CSS file to my Index.html file using this code:
<head>
<link re="stylesheet" type="text/css" media="screen" href="CSS/screen.css">
</head>
and my CSS file only contains the code below:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i');
body {font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #555;
margin: 0;
padding: 0;}
here are my HTML and CSS files:
https://drive.google.com/file/d/1nPvXFAYIYWQOM4YtZ7-iEtkUPXX8LsxP/view?usp=sharing
Is anything wrong regarding the codes or is there any problem with my windows settings?
any help well be highly appreciated.