#font-face and #font-family not working - html

I am trying to make something really simple: add 3 fonts to an html page.
I have looked at tons of examples but none have solved my problem. Maybe I am lacking something in the way it is written. I am actually not sure.
My html:
<html>
<head>
<title>Fuentes</title>
<link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>
<body>
<p class="a">This is a paragraph, shown in Roboto font.</p>
<p class="b">This is a paragraph, shown in Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>
</body>
</html>
And my .css:
#font-face {
font-family: "Roboto";
src: url(https://fonts.google.com/specimen/Roboto) format("truetype");
}
#font-face {
font-family: "Bellefair";
src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");
}
#font-face {
font-family: "Kavivanar";
src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");
}
p.a {
font-family: "Roboto", Roboto, sans-serif;
}
p.b {
font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
font-family: "Kavivanar", Kavivanar, sans-serif;
}

That's definitely not how to use Google fonts... You're not even linking to an actual font, you're linking to the support page.
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
First go to the page: https://fonts.google.com/specimen/Roboto
Then click this:
Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:

You should add stylesheet link in your html for each google font you want to use. eg
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
for roboto font in your html and then use font-family: 'Roboto', sans-serif;in your css.

Related

Can't get google font to work

I have looked through other peoples answers to the question and followed the instructions on google and just cannot get it to work. Here is what I have used.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black|Playfair+Display:400,700i,900');
The worst part is that Playfiar Display is working fine, Archivo is not at all.
For reference, georgialee.design is the URL. (works on every browser except for internet explorer)
Thank you so much! I'm sure it'll be some silly mistake :)
In header section you import it
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
or
<style>
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
</style>
In style.css file
body{
font-family: 'Archivo Black', sans-serif;
}
Copy this code into the < head > of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
In your CSS file, use the following rule to set the font-family:
// if you only want to change h1 fonts, use this selector
h1 {
font-family: 'Archivo Black', sans-serif;
}
For example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<style>
// default font for everything in the body
body {
font-family: 'Playfair Display', serif;
}
// make all h1 Archivo
// note: if you want h2, h3 etc to be archivo as well you need to add the respective selector
body h1 {
font-family: 'Archivo Black', sans-serif;
}
</style>
</head>
<body>
<div>rest of your page...</div>
</body>
</html>
see more examples here
see here to find out more about css selectors

How to use custom fonts in HTML page

I am struggling to use a custom font in my HTML page.
Below is the HTML code I tried so far with the Font DENSE, downloaded from https://www.behance.net/gallery/10231891/Dense-typeface ,
it is saved in the same folder as my HTML file MyPage.html.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: "Dense-Regular";
src: url("/Dense-Regular.otf");
}
.Font {
width: 430px;
margin: 0 auto;
padding: 0;
text-align: left;
color: #cbd9ef;
font-family: 'Dense-Regular';
font-size: 140%;
}
</style>
</head>
<body>
<div><p class = "Font">This is a paragraph.</p></div>
</body>
</html>
Can somebody point out what's wrong? I am newbie in HTML so apologies for any trivial mistake I might have made here.
Thanks for your time.
Please remove '/' in the font property 'src'. It should be like this
#font-face {
font-family: "Dense-Regular";
src: url("Dense-Regular.otf");
}
Hope this helps. Go through these links for reference.
https://css-tricks.com/snippets/css/using-font-face/
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
this:
src: url("/Dense-Regular.otf");
needs to be this:
src: url("Dense-Regular.otf");
note the lack of the forward slash in the url.
<p class = "Font"> should be <p class="Font">
Edit:
Are the MyPage.html and the Dense-Regular.otf both in the root folder of your website?
This is the syntax in CSS3:
#font-face {
font-family: font_name;
src: location [format];
}
Links for details:
1. http://www.brenkoweb.com/tutorials/css3/css3-font-styling/font-styling-in-css3-and-the-atfont-face-rule
2. http://www.brenkoweb.com/tutorials/css3/css3-font-styling/font-descriptors-in-css3
Concretely, in combination with HTML header:
CSS
#font-face {
font-family: 'ElegantIcons';
src: url("fonts/elegant-icons/ElegantIcons.eot");
src: url("fonts/elegant-icons/ElegantIcons.eot?#iefix") format("embedded-opentype"), url("fonts/elegant-icons/ElegantIcons.woff") format("woff"), url("fonts/elegant-icons/ElegantIcons.ttf") format("truetype"), url("fonts/elegant-icons/ElegantIcons.svg#ElegantIcons") format("svg");
HTML
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

Styling a CSS font face to have two custom fonts on a html page

I have a web page that successfully uses one of the two font-faces I have here. I want the user to be able to see a top menu div tag that is styled with the Cubano font while the rest of the text of the page will be open sans. #font-face seems to be just unique so I cant add two font-familys to it.
EDIT: Demo can be seen here on the rate1.html page.
#font-face {
font-family: 'OpenSans';
src: url("fonts/opensans.ttf") format('truetype');
font-weight: normal;
font-style: normal
}
#font-face {
font-family: 'Cubano';
src: url("fonts/cubano-webfont.ttf") format('truetype');
font-weight: normal;
font-style: normal
}
body {
font: 32px/40px 'OpenSans', sans-serif;
color: #777;
}
body div.recent {
font: 32px/40px 'Cubano', sans-serif;
color: #777999;
}
For the Open Sans you can use #import (in .css file):
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
or link it in the <head> :
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
See more options here

How do I add Opan Sans .tff using CSS?

I want to use the OpenSans-Light.tff webfont that I downloaded off of Google Fonts. Here is what I am trying within my main.css:
#font-face {
font-family:"OpenSans";
src: url("fonts/OpenSans-Light.ttf");
}
.banner h1 {
font-family: "OpanSans", arial;
}
Though it's not working.
If you want to use just #import use it like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
or add this to your HTML <head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
and then add this to your CSS
.banner h1{font-family: 'Open Sans', sans-serif;}
The easiest (and arguably best way to do it) is simply use #import in your CSS.
Here's a JSFiddle I made for you: http://jsfiddle.net/gLej4h82/
CSS:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans';
}
If you add
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
to the very top of your code in your css file and reference it on the certain object like the below it should work
.banner h1{
font-family:'Open Sans', sans serif;
font-weight: 400; /* 400 is regular, 300 is light, 700 is bold */
}
Use this service to generate the font face for you its very nice service.
http://www.fontsquirrel.com/tools/webfont-generator

Doesn't show supported letters

I'm using Signika Bold as font for my headers. Font is loaded from Google Webfonts. As you can see in the demo, there is a problem with showing letter "Č", both upper and lower case. The letter is on the list of supported fonts on the official Webfonts page.
CSS:
#font-face {
font-family: "Signika";
font-style: normal;
font-weight: 700;
src: local("Signika-Bold"), url(http://themes.googleusercontent.com/static/fonts/signika/v3/7M5kxD4eGxuhgFaIk95pBRsxEYwM7FgeyaSgU71cLG0.woff) format("woff");
}
h1 {
font-family: "Signika", Helvetica, sans-serif;
}
I have also tried typing the letter as HTML entitle (č), but it doesn't help.
<link href='http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
Thanks to Anon, the solution is to check the Latin Extended in the Google font settings. The demo is updated.
CSS:
#font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
src: local('Signika-Bold'), url(http://themes.googleusercontent.com/static/fonts/signika/v3/F587cG5P5ff3TX6w4JlorxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
Or:
HTML:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext">