I included Montserrat-Regular in my project. But its not detecting and font style is not changing.
In my index.html:
I included the fonts URL too.
<link href = "https://fonts.googleapis.com/css?family=Montserrat:400,700" rel='stylesheet' type='text/css'>
css:
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
You only have to put the link in your HTML file :
<link href = "https://fonts.googleapis.com/css?family=Montserrat:400,700" rel='stylesheet' type='text/css'>
and then use it on every element you want in your CSS file:
p {
font-family: 'Montserrat';
}
Check this fiddle for a better example: https://jsfiddle.net/vf7q1gjy/1/
Set the font family in your CSS file:
body { font-family: 'Montserrat', sans-serif; }
Related
I created a folder for all my fonts. Here's my html code:
<!DOCTYPE html>
<html>
<head>
<title>Play with bulb!</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
</head>
<body>
<img id="myImage" onclick="changeImage()" src="images/lightOff.gif">
<h1 id="myText" onclick="changeText()"></h1>
</body>
</html>
And my CSS:
#import url("./fonts/Poppins-ExtraBold.ttf");
#myText {
font-size: 30px;
font-family: 'Poppins';
}
I also have a javascript file, but I'm not giving it as it is unrelated to this question.
For some reason, it isn't showing Poppins. Any reason why it isn't?
I even checked in the inspect tab, and it showed this:
#import is for importing CSS, not font files.
You need #font-face to load a custom font.
#font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
And then you can use it with the name you defined:
#myText {
font-family: 'Open Sans';
}
Try using this css:
#font-face {
font-family: 'Poppins' ;
src: url('./fonts/Poppins-ExtraBold.ttf') format('truetype');
}
#myText {
font-size: 30px;
font-family: 'Poppins';
}
I have a web app with two fonts, Amatic SC for h1 and h2 and Open Sans for the rest. The webpage displays strong text fine on most browsers:
For Safari on iOS 9 (tested on iPhone 4S) and Internet Explorer 11 on Windows 8.1 (tested on LambdaTest), the strong elements use the font from the h1 and h2 elements:
The relevant CSS for these elements is:
#font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }
#font-face {
font-family: 'Amatic SC';
font-style: bold;
font-weight: 700;
src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: 700;
src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2 {
margin: 0.5rem 0 0.5rem 0;
text-align: left;
font-family: Amatic SC, cursive;
font-weight: bold;
}
The website is at www.emotionathletes.org if you want to further inspect.
What is the reason for the use of a different font on iOS Safari and Internet Explorer?
Minimal reproducible example
Following the comment, I narrowed the issue to the loading of the fonts. If I load them in the head of the HTML, linked to Google Fonts, then the page displays well. If I load them locally in the CSS with #font-face from a woff or woff2 file, then the strong elements display with a different font on iOS 9 on iPhone 4S and on Internet Explorer 11 on Windows 8.1. The order of loading the fonts in the CSS does not change the result.
A minimal reproducible example has HTML file strong.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="strong.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
</head>
<body>
<h2>Summary</h2>
<p>The Bulgy series, whose first season is "Emotion Athletes", has the following purposes:</p>
<ul>
<li>
transform the <strong>difficulties</strong> of the <strong>pandemic</strong> into <strong>opportunities</strong> for children to <strong>recognise what they are feeling, understand the reason, and use their emotions</strong>;
</li>
</ul>
</body>
</html>
and CSS file strong.css:
/*
Amatic SC and Open Sans are Google Fonts:
https://fonts.google.com/specimen/Amatic+SC?sidebar.open=true&selection.family=Open+Sans#about
https://fonts.google.com/specimen/Open+Sans?sidebar.open=true&selection.family=Open+Sans#about
*/
/* comment these #font-faces for the page to work properly. */
#font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }
#font-face {
font-family: 'Amatic SC';
font-style: bold;
font-weight: 700;
src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: 700;
src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2 {
font-family: 'Amatic SC', cursive;
}
I put a live version at www.emotionathletes.org/strong.html, with CSS file at www.emotionathletes.org/strong.css.
For my own reasons, I prefer to serve the font files from my server than query them from Google Fonts. How can I serve the font files locally and still display them properly on Safari and Internet Explorer?
The issue was in the code, which I found today as I was changing the main font:
For Open Sans at 700, the woff filepath was:
/fonts/amatic-sc-v13-latin-regular.woff
and should have been:
/fonts/open-sans-v17-latin-700.woff
Older browsers use woff and not woff2, and so they were doing exactly as they were told. I now fixed the issue.
Moral of the story: if using local fonts for performance, make sure to do the right wiring of CSS to filepaths.
I am using #font-face to define a font family in my CSS style sheet. When I then try to set the font family attribute, I am not able to get the new font to display on my HTML page.
#font-face {
font-family: 'Goudy Trajan Regular';
font-style: normal;
font-weight: 400;
src: local('Goudy Trajan Regular'), local('GoudyTrajan-Regular'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
html, body
{
height: 95%;
width: 90%;
font-family: 'Goudy Trajan Regular', arial;
}
Update: I've stripped everything out and it still is not working. Here is my complete CSS -
#font-face {
font-family: 'Goudy Trajan Regular';
font-style: normal;
font-weight: 400;
src: local('☺'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
body
{
font-family: 'Goudy Trajan Regular', arial;
}
Here is my complete HTML -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<h1>TESTING A NEW FONT</h1>
</body>
</html>
I'm trying to load a custom font from [DaFont.com (CaviarDreams)][1], with #font-face in css. I use this: https://www.fontsquirrel.com/tools/webfont-generator and I get this in css:
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 13, 2018 */
#font-face {
font-family: 'caviar';
src: url('font/caviardreams-webfont.eot');
src: url('font/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
src: url('font/caviardreams-webfont.woff2') format('woff2'),
src: url('font/caviardreams-webfont.woff') format('woff'),
src: url('font/caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
font-weight: normal;
font-style: normal;
}
p {
font-size:40px;
font-family:caviar;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>test</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
</head>
<body>
<p>test<p>
</body>
</html>
But it don't work!
(edited)
Can you help me?
So after testing it on my site I have found a few issues:
Your css class for p is not correct.
In the font url list you have comma separeeted insted of semicolumn
I have tried the same steps as you have, and get only woff and woff2 files. (So you need to remove the eot,svg paths from css)
My code fo one example:
<style>
#font-face {
font-family: 'caviar';
src: url('font/caviardreams-webfont.woff2') format('woff2');
src: url('font/caviardreams-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p{
font-family:caviar;
font-weight:normal;
font-style:normal;
}
</style>
<div>
<p>Test</p>
</div>
Hope this helps,
How do you reference font from a css file? For example, I have css file with the following structure:
fonts.css file
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
How do I use this font in other css files?
Here is an example :
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
.mystyle {
font-family: "Open Sans";
font-weight: 700;
font-size: 24px;
}
<p class="mystyle">The quick brown fox jumps over the lazy dog</p>
If your want to use it in another CSS file, on your html page you load first the css containing the font faces declaration, then you load the second css using the first one:
<link rel="stylesheet" href="my_font.css">
<link rel="stylesheet" href="my_other_stylesheet_using_it.css">
That way, in the second css you can use the font faces declared in the first css.
You can also import the css containing the font faces declaration into another:
#import url("base.css");
Look at this: include one CSS file in another