I'm using ATOM and i tried to change the font family from google fonts of the body in my code but for something doesn't change.
First i doing this: href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" type="text/css"
ok theres like a couple of ways to import google fonts
1:
in html>head
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
then in css
body{
font-family: 'Roboto', sans-serif;
}
2:
in css file
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
then
then in css
body{
font-family: 'Roboto', sans-serif;
}
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.
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
I'm aware that all of you know, if we do this in our .css file:
#font-face {
font-family: "Akrobat-Regular";
src: url('/assets/Akrobat-Regular.otf') format("truetype");
}
body {
color: #1c1c1c;
font-family: "Akrobat-Regular" !important;
}
Browser will do additional request to download font, and as a result there will be a short amount of time when default font will be used and then they will be substituted with new downloaded.
I found this way to preload font, but really don't know how top use downloaded font without additional request (don't worry, ti as slim syntax):
link rel='preload' href='/assets/Akrobat-Regular.otf' as='font' type='font/otf'
= stylesheet_link_tag 'application'
css:
#font-face {
font-family: "Akrobat-Regular";
src: url('/assets/Akrobat-Regular.otf') format("truetype");
}
body {
color: #1c1c1c;
font-family: "Akrobat-Regular" !important;
}
You can use the pre loaded fonts without creating a font-face as well.
<link rel="preload" href="your_font_file" as="font" type="font/woff" crossorigin="anonymous">
Just mention the font family to use it:
font-family: "your_font";
This way you don't need to put an additional request, as you have already loaded the font in your document.
Check the below example:
div.rob {
font-family: "Roboto";
font-size: 20px;
}
<link rel="preload" href="https://github.com/FontFaceKit/roboto/blob/gh-pages/fonts/Regular/Roboto-Regular.woff" as="font" type="font/woff" crossorigin="anonymous">
<div class="rob">
Hola in roboto
</div>
<div>
Normal font
</div>
I am working on a generic polymer 2.0 login page application, and I'm trying to use a custom font for a title bar.
In my login-page.html, I have this for the custom style:
<custom-style>
<style is="custom-style">
body {
margin: 0;
}
app-toolbar {
background-color: #4F1585;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
#maintitle{
color: red;
font-family: 'font-regular';
}
</style>
</custom-style>
And my header/toolbar:
<app-header fixed condenses effects="waterfall">
<app-toolbar>
<img src="../icons/app-icon.png" style="height:100%;"/>
<div main-title id="maintitle">Login Page</div>
</app-toolbar>
</app-header>
And I import the ttf file like this:
<link rel="stylesheet" href="../fonts/font-regular.ttf" type="css">
This code turns the text red, but it doesn't apply the font. In contrary, it switches to Times new roman. I'm brand new to polymer, is there something I'm missing?
You can use #font-face to import your font.
UPDATE:
You need to use an external document for the #font-face import and not place it in the custom element template. Some at-rules in the shadow root are ignored in Chrome, see discussion. While it's not an issue when using Polymer 1, Polymer 2 seems to follow the browser behavior in this respect.
I would suggest to have a css stylesheet with the #font-face import:
#font-face {
font-family: "font-regular";
src: url("./font-regular.ttf") format("truetype");
}
If you import that in your index.html, "font-regular" will be available globally. Alternatively, you can import the stylesheet only in your custom element.
To import font to polymer use link href then apply the font
example
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">
html, body {
font-family:'Fira Sans', sans-serif;
}
you can also override --paper-font-common-base font
html, body {
font-family:'Fira Sans', sans-serif;
--paper-font-common-base: {font-family:'Fira Sans', 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?