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.
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'm not a css expert and i'm experiencing some trouble with cross-browser behaviour. In Google Chrome, my code works fine. In the other browser's i've tried (Mozilla, Edge, IE) it doesn't; specifically when using these last browsers, the font-style property seems to exclude the font-weight property
This is my html and css code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.non-italic-class{
font-size: 25px;
font-weight: 900;
font-family: "futura-pt", sans-serif;
}
.italic-class{
font-style: italic;
}
</style>
</head>
<body>
<span class="non-italic-class">NON ITALIC</span>
<br>
<span class="non-italic-class italic-class">ITALIC</span>
</body>
</html>
Here's how it looks like in Chrome (fine for me):
This is how it looks in Mozilla, Edge, IE (wrong for me):
Am i doing something wrong? Do i need to add some code in order to get the same behaviour with all these browsers?
I know this is a short question, but how do you use multiple custom Google Fonts, i.e Baloo and Roboto, in the text?
In this example the text should be Roboto and headings should be Baloo.
Thanks for your time.
You click "select this font" for each font you want to use, and google will give you a single link tag with multiple fonts. You can also include multiple link tags for each font.
h1 {
font-family: Baloo;
}
h2 {
font-family: Roboto;
}
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>
google fonts is now using css2 and the answers above are outdated.
the solution using css2 would be:
https://fonts.googleapis.com/css2?family=Baloo&family=Roboto
source: google fonts doc for css2
Go to https://fonts.google.com/
Search for say Roboto - https://fonts.google.com/specimen/Roboto
Hit "select this font" and you'll get a link to add to you html like this:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Note: You can also get one line with multiple fonts by piping the families.
Add this link(s) in your <head> tag
Use CSS to select the font with font-family.
See example below:
h1{
font-family: "Baloo"
}
p{
font-family: "Roboto"
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
</head>
<body>
<h1>Baloo</h1>
<p>Roboto</p>
</body>
Use as many as you want and import them as a stylesheet.
https://fonts.google.com/
For your example:
h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>heading</h1>
<p>paragraph</p>
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 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)