This is the code I added in my css style sheet:
#font-face
{
font-family: 'space_rangerregular';
src: url('spaceranger-webfont.woff2') format('woff2'),
url('spaceranger-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I associated this with h6:
h6{
font-size: 12px;
font-family:"Space Ranger Regular", serif;
}
Then in my HTML file (i linked the css sheet ) i did:
<h6>Test</h6>
However my code doesn't display the font. Whats wrong with it?
Use the same value that you assigned to font-family in the #font-face section for font-family where you want to use it. So, for your h6:
h6{
font-size: 12px;
font-family: space_rangerregular, serif;
}
When you use a font-face you set the font-family to name that font. So, in your CSS you need to call that font using the name you enter in font-family. But you need to put that name inside a quotation marks. So:
#font-face{
font-family: 'space_rangerregular'; // Name of your font
src: url('spaceranger-webfont.woff2') format('woff2'),
url('spaceranger-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h6{
font-size: 12px;
font-family: 'space_rangerregular', serif; // Call the SAME name here
}
Related
I'm trying to import a new font to implement it to the css of my p element. But the font that I imported can't be displayed for some reason.
This is my code:
#font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(./Quicksand-Regular.ttf) format('ttf');
}
p{
font-family: 'Quicksand', sans-serif;
}
Do you know what causes this problem?
Solved the problem by the way, like this:
src: url(./Quicksand-Regular.ttf) format('truetype');
I am completely new to website design and programming. I have created a website on Mobirise, and am storing it on Github. I am looking to change the font across the website, as I no longer like the one that I had chosen on Mobirise when I exported it to Github.
I have uploaded the font files that I would need to use to the /OpenSansFonts folder in my repository at: https://github.com/SkyBetChampionship/Sky-Bet-Championship/tree/gh-pages.
Would anybody please be able to advise me what to do next to change the font across my website?
Thank you in advance,
Adam
You can create separate *.css file with this code, or add this code in your assets/mobirise/css/mbr-additional.css (if you create separate file, don't forget import this file in your home.html.
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-RegularItalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'OpenSans-Semibold';
src: url('/OpenSansFonts/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-SemiBold';
src: url('/OpenSansFonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
For change font across web site, add to body in assets/mobirise/css/mbr-additional.css font-family property.
body {
font-family: 'OpenSans';
font-weight: 400;
font-style: normal;
line-height: 1.5;
}
For import separate css file with fonts, add in your home.html around 42 string this code:
<link rel="stylesheet" href="your_path_to_file/file_with_fonts.css" type="text/css">
When you want another style of font, use font-family, font-weight and font-style properties.
Feel free ask other questions :) Hope this will help you
I have done quite a bit of research at this point on the usage of #font-face, and am familiar with some of the challenges, but have nonetheless decided that I wanted to use it for my application. However, for some reason completely unknown to me, the browser is not loading the expected font-face.
I have a CSS file with declarations as follows: Note that the "!important" was me messing around with things, it did not appear to have any effect.
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
.cerberus-body {
margin: 0;
font-weight: normal !important;
font-family: roboto;
}
Here is a screenshot of the structure of my web:
Web Directory Screenshot
As you can see from the screenshot the src paths on the font-face declarations match up with what I have in my directory, and I have verified they are reachable from my deployed site.
The body elem of my page has the following:
<body class="cerberus-body"></body>
I have verified in dev console that the styles and declaration are working as expected.
Given all of that- here is what I see in the network tab of my dev console when loading my page: (It shows only Roboto-Black and Roboto-Bold getting loaded)
Network tab screenshot
And when I inspect an element on the page I see that the styles piece shows a rendered font of Roboto Black:
Rendered font screenshot
Inspecting the Body on the page I see that my styles are reflected as I would expect, and the css class is getting honored:
CSS inspect screenshot
At this point, I'm really at a loss here. I could use any help or direction on where to go next troubleshooting this. I'm at the point where I think it's likely I'm going to give up on the custom font, but this is a last-ditch attempt to save my dignity.
Given that the fonts don't appear to be loading at all through the network tab, I must be missing something with how the rendering engine determines what font faces to lazy load. Beyond that, I'm at a loss.
Update
After reading through another question supplied in the comments by Pete, I read that some of the commenters recommended changing the order with which the font-face rules are defined. I flipped the order of my rules and sure enough, the font rendered as expected.
I'm hesitant to close the question though, as I have no clue why this works and would like to understand the underlying implementation.
For posterity- my new declarations
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}
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
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 */
}