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.
Related
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.
I am trying to add a google-font to my jinja2 template. I downloaded the google font and put it in the project directory, using this
<link rel='stylesheet' type='text/css' href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}">
i tried to use the font in the template but it is not working. What is the proper way of doing this? The CSS looks like this
body {
background-color: #ED9121;
font-family: 'Oswald';
font-weight: 700;
}
If I use the font directly from google instead of from my server, it works fine. Please help.
Try to use this in your CSS
#font-face {
font-family: Oswald;
src: url(/static/fonts/Oswald-Bold.ttf);
}
body {
font-family:Oswald;
}
remove href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}"
also make sure your font is inside the folder fonts.
I tried it and for me this is working.
We can change the font size by using the font tag and customizing the size
for example :
<html>
<head>
</head>
<body>
<p><font size="6">Font size is 6</font></p>
<p><font size="24">Font size is 24</font></p>
</body>
</html>
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)
Does IE8 have size limit on the size of a font file it will load? For example the following code doesn't seem to work with certain fonts (especially ones over 2MB) but will with smaller fonts:
<!DOCTYPE html>
<html>
<HEAD>
<style type="text/css">
#font-face {
font-family: 'Symbola';
src: url('Symbola.ttf');
}
.bars { font-family: 'Symbola'; }
</style>
</HEAD>
<body>
<div class="bars">
⏳
</div>
</body>
</html>
IE 8 does not support TTF fonts in #font-face. If it seems to do that for some fonts, the reason is that your computer has the named font as an installed font. So it’s not the size that matters, it’s the formats.
Use e.g. Fontsquirrel #font-face generator to generate different font formats, for cross-browser functionality.