i've downloaded a custom font in ttf format, i want to override my bootstrap font for a header text.
I've added it in my CSS.
#font-face {
font-family: 'BrauerNeue';
src: url(brauerneue.ttf);
}
h1 {
font-family: 'BrauerNeue';
}
Then added a h1 in my page:
<h1>Text</h1>
It still displays in the bootstrap font.
What am i doing wrong?
Check the URL. If all is correct, then:
h1 {
font-family: "BrauerNeue" !important;
}
Related
I have downloaded the Twitch font, which is Twitchy.TV.
I'm trying to use it, but when I type the font, it doesn't recognize it.
I think it might be because Twitchy (.) TV. The period is messing it up.
I have tried putting it with "" or ''.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCH</h1>
</div>
</div>
.left h1 { font-size: 22px; color: #fff; font-family: Twitchy.TV; }
Have you included a #font-face declaration in your CSS?
Nowadays the best format for using fonts on the web is .woff or woff2 files, if you don't have your font in this format there are a lot of web font converters available.
#font-face {
font-family: 'Twitchy.TV';
src: url('Twitchy.TV.woff2') format('woff2'),
url('Twitchy.TV.woff') format('woff')
}
(Assuming you have font files in the same directory as your stylesheet named Twitchy.TV.woff and/or Twitchy.TV.woff2)
If you're just testing the font during development and have it locally installed, you can specify a local installation like this:
#font-face {
font-family: 'Twitchy.TV';
src: local('Twitchy.TV');
}
Then you are able to use it like:
.left h1 {
font-family: 'Twitchy.TV';
}
Ensure that you have imported the font if it is from an external source!
If you have downloaded the font, make sure that you have added it to the list of font-families in your computer. This can be done in the Control Panel.
You need to import the font at the top of your CSS using #font-face. This allows you to use non-websafe fonts in your website. the src: url can be either a path in the local storage or on an external site.
#font-face {
font-family: "Twitchy.TV";
src: url("path/to/font.ttf");
}
You can use the font like this
.left h1 {
font-family: "Twitchy.TV";
}
first of all upload you font here https://transfonter.org/ and then you will have generated font prepared and add all your fonts to assets folder and in style.css or style.scss open downloaded folder from transfonter and copy what's inside stylesheets.scss and add to your style.css and then make sure to be correct path to fonts assets/fonts for exameple
#font-face {
font-family: 'Roboto';
src: url('Roboto-Black.woff2') format('woff2'),
url('Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
And then in style.css use it, example
h1 {
color: red;
font-family: 'Roboto', sans-serif; //Here you add default font in case the browser
can't find Roboto font
}
i use a font in my web page.there is not any problem in chrome and Firefox and IE in my computer but in other Devices the font changes.
Someone knows why this happens?
*{
font-family: Montserrat;
}
The font is installed in your system, therefore, it's not changed in your device. you need to add the font in your code.
e.g
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
add in the CSS file change the link with your require font
or if you have a font file then add the font file in the CSS as
#font-face { font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf'); }
h2{
font-family: roboto-regular;
}
You must define your font in your css file.
For Ex:
#font-face {
font-family: myFirstFont;
src: url(font-location);
}
* {
font-family: myFirstFont;
}
It is possible that some browsers/OS/Devices doesn't support that font.
Define multiple fonts.
* {
font-family: 'Montserrat', sans-serif;
}
Another solution can be download Google Web Fonts, upload them with your website and define them in the css files manually. Another way may be usage of JavaScript Web Font Loader instead of the default one.
In your Header:
<link href="https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap"
rel="stylesheet">
In your CSS:
#import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');
.fontn{
font-family:'Caesar Dressing', cursive;
}
I am using webfont in my website, sometimes font which i desired is not applied to text, In order to overcome that i want to load font while building CSSOM it self, so I tried this
body style="font-family: 'customfont'; src: url('XXXX/custom-font.woff2')"
I tried this also
body style="font-family: 'customfont';
But of no use.
You should use font-face inside style tag It might work and it's pretty fast and clean (Put it in head )
<style>
#font-face{
font-family:custom1;
src:url(XXX/fonts/XYZ.ttf);
}
</style>
then use like `style="font-family: 'custom1';
I hope It would be HelpFull
#font-face {
font-family: myFont;
src: url('XXXX/custom-font.woff2');
}
div {
font-family: myFont;
}
Try to #font-face Rule
For inline use in HTML:
<style>
#font-face{
font-family: fontname;
src: url(fontdirectory);
}
</style>
Otherwise, put this in your CSS:
#font-face {
font-family: fontname;
src: url(fontdirectory);
}
Then apply the font to the elements you want.
I have also tried the .ttf version of this font without any results. For some reason the font is not showing up. The url to the font is correct.
#font-face {
font-family: EagleLake; /*a name to be used later*/
src: url('EagleLake.otf'); /*URL to font*/
}
h1{
font-family: EagleLake;
}
Try this format instead, it definitely works:
#font-face {
font-family: EagleLake;
src: url(EagleLake.otf);
}
Your h1 style attribution should then be of font EagleLake.
i have tried adding a font to my webpage using #font-face rule but its not showing
HTML
<!-- language: lang-html -->
<ul>
<li>GREAT</li>
<li>BITE</li>
</ul>
CSS
<!-- language: lang-css -->
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
you can download the font from here : http://www.moldire.com
You need to put font-face in top of CSS.
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
li
{
font-family:Armata;
}
or if u want to use it for full page then apply it to body tag
Here are my steps to have the font working:
Font face first in css (already mentioned)
Have the type/format of font - EX: src: url(Armata-Regular.ttf) format('truetype')
Make sure your host (local or not) has the MIME type for these fonts
Lastly, would you consider a web font path? Save yourself time by getting a web path embedded font: http://www.google.com/fonts/specimen/Armata
Doing this will save you time skipping last bullet.
Use this on your website
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
and in CSS you will need this :
font-family: 'Armata', sans-serif;