I'm trying to replicate a simple example from MDN and it's not working.
html file
<body>
Hello world!
</body>
css file
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", Arial;
font-size: 10rem}
Live codepen example.
Related
I put below code into style.css and called style.css from the header.php.
#font-face {
font-family: 'Noto Sans JP';
font-weight: 700;
font-style:normal;
font-display: swap;
src: local('Noto Sans JP'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.woff2') format('woff2'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.woff') format('woff'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.otf') format('opentype');
}
#font-face {
font-family: 'Noto Sans JP';
font-weight: 400;
font-style:normal;
font-display: swap;
src: local('Noto Sans JP'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.woff2') format('woff2'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.woff') format('woff'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.otf') format('opentype');
}
And I set the font as below, but when I test it with Chrome developer tools, both desktop and mobile web fonts are loaded.
* {
font-family: Noto Sans JP, sans-serif;
}
#media (max-width: 549px){
*{
font-family: 'ヒラギノ角ゴ ProN' , sans-serif !important;
}
}
How to load web fonts only on desktop?
I would like to ask for advice. thank you.
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
This bit of code is available on https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face. It is supposed make the sentence "This is Bitstream Serif Bold" appear in the VeraSeBD font. However it simply does not.
I can change fonts to arial for example. Using this code, the font is different:
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: arial }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
How does one proceed when even copy pasting sample code still does not make it work?
The setup for the test is using a PHP server running on localhost on a windows machine
If this does not work then it is probably CORS you're dealing with. Please do not use the java2s website as a reference for html and css because this site is very very old and not up-to-date.
First, the browser will try to load the modern woff2 font. If it fails then it will try to load the older woff font. The ttf font is a fallback for very old browsers/devices. At the end, if no fonts can be loaded , it falss back to the default serif font.
edit all fonts fail to load. Reason: they has been blocked by CORS policy.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Font Sample</title>
<style>
#font-face {
font-family: 'Bitstream Vera Serif Bold';
font-style: normal;
font-weight: 400;
src: local('Bitstream Vera Serif Bold'),
url('https://mdn.mozillademos.org/files/2468/VeraSeBd.woff2') format('woff2'),
url('https://mdn.mozillademos.org/files/2468/VeraSeBd.woff') format('woff'),
url('https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf') format('truetype');
}
body {
margin: 0;
font-family: "Bitstream Vera Serif Bold", serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
I changed the code into this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Font Sample</title>
<style>
#font-face {
font-family: 'Bitstream Vera Serif Bold';
font-style: normal;
font-weight: 400;
src: url(VeraSeBd.ttf)
}
body {
margin: 0;
font-family: "Bitstream Vera Serif Bold";
font-weight: 400;
font-size: 50px;
line-height: 1.5;
}
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
And downloaded the font, and placed it in the root directory
It seems to have fixed the problem. Thank you for your assistance
I want to know if it is possible to override bootstrap with a font-face family. I have font-faces:
#font-face {
font-family: 'customFont Normal';
font-weight: 400;
font-style: normal;
src: local(customFont-Normal),
url(<filepath>) format(<file_type>);
}
#font-face {
font-family: 'customFont Bold';
font-weight: 700;
font-style: normal;
src: local(customFont-Bold),
url(<filepath>) format(<file_type>);
}
#font-face {
font-family: 'customFont Thin';
font-weight: 200;
font-style: normal;
src: local(customFont-Thin),
url(<filepath>) format(<file_type>);
}
From what I understood with font-face, having multiple font-faces at different weights allows me to automatically apply these fonts to my HTML whenever I specify a weight on the element and it would match to the closest weight. But I am currently using bootstrap v4 and it has its own default font. So I added this to my scss to override it:
$font-family-sans-serif: 'customFont Normal', 'customFont Bold', 'customFont Thin', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
But this only applies the first font-face to my website, and changing the weights on the elements did not change the font. Is there a way to combine all of these together to override bootstrap font while keeping the functionality of font-face? I have read that this may work:
#font-face {
font-family: 'customFont'
src: url(<normal>) format() font-weight: 400,
url(<bold>) format() font-weight: 700,
url(<thin>) format() font-weight: 200,
}
And I tried adding that in front of $font-family-sans-serif but it had ignored and did not apply any font. Is my approach wrong or is there a better method on doing this?
Edit:
I decided to change the names of all the font-family to the same name but kept everything else the same. My second method was giving errors so I went with this method and it seems to be working.
You should name your fonts the same name, now if you change the font-weights, it should switch correctly.
EDIT: Just realized that you've already mentioned this in your question
#font-face {
font-family: 'customFont'
src: url(<normal>) format() font-weight: 400,
url(<bold>) format() font-weight: 700,
url(<thin>) format() font-weight: 200,
}
make sure you override it with the correct font-family:
$font-family-sans-serif: 'customFont', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
I am sending an email newsletter.
Some how the font Novecentowide-Medium.otf is not getting applied in any heading.
the original font in PSD looks like
When i send a test email it looks like
The html code for font is
<h2 style="font-family: 'novecento_widemedium'; font-weight:400; padding-left:70px;">Transforming<span>Drones</span></h2>
You could connect your opentype font in css:
#font-face
{
font-family: 'Noto Sans', 'Arial';
font-style: normal;
font-weight: 400;
src: url(path/to/font/Novecentowide-Medium.otf) format("opentype");
}
Or use standart format ttf:
#font-face
{
font-family: 'Noto Sans', 'Arial';
font-style: normal;
font-weight: 400;
src: url(path/to/font/Novecentowide-Medium.ttf); /* Pay attention to extension */
}
I use this code to implement a personalized font:
CSS
#font-face{
font-family:'playtime';
src: url('../fonts/font-1.otf') format('opentype');
}
p.playtime-font {
font-family: 'playtime', Verdana, Arial, Helvetica, sans-serif;
font-size: 3em;
}
HTML
<div class="texto-horario">
<p class="playtime-font">Horario</p>
</div>
But it does not work, I've tried it on Chrome and Safari and nothing...
I don't know what I am doing wrong please anyone can help me?
Try it without the single quotes:
#font-face{
font-family: playtime;
src: url('../fonts/font-1.otf') format('opentype');
}
p.playtime-font {
font-family: playtime;
font-size: 3em;
}
If this doesn't work, is your console saying anything?