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
Related
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.
#font-face
font-family: MyFont
src: url(https://.../font_name.ttf?raw=true)
$font-main: 'MyFont' , sans-serif
.some_class
font-family: $font-main
When I use MyFont coming from web there is no effect. How to do this properly?
You don't need to add a .ttf, simply include the font #import url at the top in your main .scss file:
#import url('https://fonts.googleapis.com/css?family=Overpass');
Then to use it:
//store it in variable first
$font-main: 'Overpass', sans-serif;
//to use it
.selector {
font-family: $font-main;
}
This would be best for browser compatibility.
If for whatever reason you still want to load a .ttf file, in your sass file at the top set it's name and path:
#font-face {
font-family: 'myFont';
src: url("fonts/myFont.ttf") format("truetype");
}
then use it:
$font-main: 'myFont', sans-serif;
.selector {
font-family: $font-main;
}
Demo Snippet 1 - loading font via conventional CSS:
#import url('https://fonts.googleapis.com/css?family=Overpass');
#import url('https://fonts.googleapis.com/css?family=Overpass');
div {
font-family: 'Overpass', sans-serif;
}
span {
font-family: sans-serif;
}
<div>Overpass font loaded</div>
<span>regular sans-serif</span>
Demo Snippet 2 - loading font via HTML in-between your <head></head> tags:
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
div {
font-family: 'Overpass', sans-serif;
}
span {
font-family: sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
<div>Overpass font loaded</div>
<span>regular sans-serif</span>
Demonstration font was taken from here
I have this site:link
I put an image to understand better
The difference bothers me more background and text size.
Font used in photoshop is "ArchivoNarrow regular", this I put myself in the CSS code below
CODE CSS:
.details-footer{
display: inline-block;
width: auto;
font-size: 9pt;
color: white;
font-family: ArchivoNarrow regular;
}
Can you tell me please from where all these differences and how can I fix?
Thanks in advance!
To add font, insert this in your index.php or whatever file, that containt links to your css files.
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
You need to insert this above all other css links.
Then add following line to your css, where you need it:
font-family: 'Archivo Narrow', sans-serif;
For example, to apply this to the footer:
.details-footer {
font-family: 'Archivo Narrow', sans-serif;
}
Done!
P.S.: It's not a good idea to upload the font to your server, you should use Google Fonts when you can.
Have you defined the font? If not you do so like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
then you need to upload the .woff font file to your folder.
I would just like to ask if anybody would be able to take me step by step through how to get custom fonts working with TW Bootstrap?
Cheers Guys
You simply need to add some css using the * (wildcard) element:
#import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
* {
font-family: 'Ubuntu Mono', sans-serif !important;
}
Here's a fiddle
you could go with what #Lando suggested or try adding this in the header
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
make it universal
* {
font-family: 'Lato', sans-serif;
}
or add a custom class
.custom_Class {
font-family: 'Lato', sans-serif;
}
I'm planning to use Google web fonts on my site.
My site has lots of pages, but only a few CSS files.
-=> Is there any way to add this tag in the CSS file (because I don't want to edit all the HTML files)?
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
or do I need to add the above line in every HTML page's head section?
Yep, #import the google font in - jsfiddle example
Put this at the top of your CSS file
#import url('http://fonts.googleapis.com/css?family=Droid+Sans');
Then, reference it like normal
h1 { font-family: 'Droid Sans', arial, serif; font-size:24pt;}
Add the tags, how? Please explain yourself better.
In the HTML you can do this…
<style type="text/css" media="screen">
h1 { font-family: 'Droid Sans', arial, serif; }
</style>
If that's what you're asking?