I'm new to the CSS world, and i'm practicing on codepen.io
I'd like to add a certain font to my Pen. I downloaded it from a webSite, then tried to upload it on github and use the link to that file, but it doesn't work >,<
you can find the code here: http://codepen.io/Koop4/pen/mVaOLG
or read the following:
<body>
<h1>Hello World</h1>
</div>
</body>
html,
body {
height: 100%;
background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}
#font-face {
font-family: 'superMario';
src: url('https://github.com/koop4/FreeCodeCamp/blob/master/portfolio/font/prstart.ttf');
}
h1,
h2,
h3 {
font-family: 'superMario'
}
thx in advance!
Because the URL of the .ttf file is a page not a file path. You must use the direct link of the font file. Use this:
#font-face {
font-family: 'superMario';
src: url('https://raw.githubusercontent.com/koop4/FreeCodeCamp/master/portfolio/font/prstart.ttf');
}
If doesn't work you must upload the font file in other hosts then use it.
Related
Pretty basic question here, I want to use a font that is saved in my browser and don't have link for it
How to check the css rule for the font.
How to use it in my website.
You would most likely have to use #font-face and download your font as a .ttf or .woff2 file.
Kind of like this: src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
To apply the #font-face to an element, give the element a font-family property and set it to whatever you named it in the #font-face rule.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff); /* change this to your font */
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
</body>
</html>
Source: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Additional Reference: developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Hope this helped.
I can't get the font I am using to load in different weights.
I've tried loading in all the different weights from google fonts and both trying the #import within my css and the
In my css:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
* {
font-family: 'Open Sans', sans-serif;
}
.titles{
align-content:left;
font-weight:800;
}
In my html:
<div class="titles">
<h2> What we do.</h2>
</div>
Your 800 value is overruled by the default browser setting of 700 for h2 elements since you only applied it to .titles. You need to apply font-weight: 800 specifically to the h2 element.
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
* {
font-family: 'Open Sans', sans-serif;
}
.titles h2 {
align-content: left;
font-weight: 800;
}
<div class="titles">
<h2>What we do.</h2>
</div>
Use link in head tag of your html :)
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
Be careful so you don't split the import link into multiple rows and also check for spaces in the link. It should all be on one line. No spaces or breaklines.
#import should be used if you have different style sheets and you just need that import in a specific stylesheet. Or if you don't have access to edit the <head> element.
Else, you should use the html <link> element to include your fonts directly in the head element.
Check below
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
* {
font-family: 'Open Sans', sans-serif;
}
.titles {
align-content: left;
font-weight: 800;
}
<div class="titles">
<h2> What we do.</h2>
</div>
I am developing a exam software where I need some help in fonts implementation. I provide user an option to add Hindi font content i.e. Kurtidev 10 and apply CSS to that div:
<style type="text/css">
#font-face
{
font-family: "My Custom Font";
src: url('font/Kruti_Dev_010.ttf') format("truetype");
}
.customClass
{
font-family: "My Custom Font" !important;
font-size: 18px !important;
}
but if user add any of the english font in that text then it convert that Hindi text into the Kurtidev 10 too.
I need help that how can I set that only Hindi font take that CSS, if any other font it found then it will not be converted.
I am trying to use a custom font in a webpage. I however know next to nothing about HTML5 and CSS. I want 1 h1 tag to have a custom font. I have the .ttf file in the same folder as the webpage. I tried this with no success:
<h1 style="text-align: center"; font-family="MinecrafterReg.ttf">Welcome to Ben's Minecraft</h1>
Could anyone else help me?
Stick this in the style tags:
#font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;
Then stick this in the h1 tag:
<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>
Nowadays you can place an #import at the top of your style block:
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
This is not how you should use a custom font on a website. First, you should use an external style sheet and have all your CSS in that. Using inline styles is not a great practice. Second, I do not think you can link to a .ttf file as you want. Notice also that your code had wrong inline format. font-family: not =. Also, the whole inline style needs to be in quotes. style="text-align: center; font-family: 'Sigmar One', cursive;"
That being said - you could link your font in your 'head' of your document and then use inline styles to style h1. Here is a way to do it with a google font. Hope this helps!
<head>
<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
</head>
<h1 style="text-align: center; font-family: 'Sigmar One', cursive;">Welcome to Ben's Minecraft</h1>
font-family:url('https://s3-xxxxxxxxxxxxxx/fonts/FloydsnirLTStd-Rmands.otf'); in Inline style css
I am practically wetting myself at the prospect of getting this working!
I have set the location of the .ttf file - but it doesn't seem to pick it up.
Am I setting the location up wrong?
Am I describing the font incorrectly?
<!DOCTYPE html>
<html>
<body>
<style>
#font-face
{
font-family: Baskerville;
src: local('J:\Internet\Paul\Baskerville test\IT597___.ttf');
}
p { font-family: baskerville, serif; }
</style>
<h1 class="baskerville">This is written in ITC Baskerville</h1>
<p>Please note, that this is not written in Baskerville, but the word <span class="baskerville">Waterman</span> here is.</p>
<p>Read this for the W3C specifications on the "#font face" declaration which I've used to do this.</p>
</body>
</html>
http://www.fontsquirrel.com/tools/webfont-generator use this generator to generate your font face. it will also provide the right css for the font.
one of the mistakes I see in your code is that your font-family is defined as Baskerville and p has font-familly baskerville (capitalize this)