I have the following in my css and the font won't change to what I want it to become.
body{
background-color:#a8a7a7;
color:#C50909;
font-family: main, Calibri;
text-align:center;
}
#font-face{
font-family: main;
src: url('fonts/RegencieLight.ttf');
}
and my css properly links into my html because all of the other css aspects will still be applied. If anyone could help me that would be great. Thanks.
You must provide a string as the font-family name like this
font-family: "main";
so that you can reference it in other places like this
font-family: "main", Calibri
Check out: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Either
the path is wrong or
depending on the browser and operating system it could not like the font format
Either way I recommend reading Paul Irish's bullet proof #font-face syntax and using Font Squirrel's #font-face generator/packager The packager will take a font and create each format that a web client might need so it will work on all systems.
Related
I am trying to import a font that I downloaded to my code using #font-face, the text is reading right however it's bypassing the downloaded font in my font family and going straight to the backup font, "Cursive". I don't know why this is happening because I've triple checked that it is linked to the right folder. Please let me know any thoughts you might have. Thanks.
enter image description here
#font-face usage
With the #font-face rule,you do not have to use one of the "web-safe" fonts anymore like font-family:'Poppins','serif'.The will be Stored as a Local font like font-family : Times New Roman,serif
In the #font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) defined in the font-family property:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Here is the problem. So everything works fine for me on my machine, localhost and when the website is uploaded to online host. But I got my friends to go to the site to check if everything is working and the regular Roboto font loads fine but the thin version of it doesn't. I originally just had the import link from google for the font but later added the font face import code that I found on here but that doesn't work too. I even tried adding the font-weight property but it still doesn't work.
I need help my head hurts real bad here's the code enjoy
Top of the css file
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(fonts/Roboto-Regular.ttf) format('ttf');
}
#font-face {
font-family: 'Roboto thin';
src: local('Roboto thin'), url(fonts/Roboto-Thin.ttf) format('ttf');
}
Class for one of the texts that uses the font
.txt2 { /* text */
font-family: 'Roboto thin';
font-size: 24px;
color: white;
text-align: center;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 20%;
margin-right: 20%;
font-weight: 100;
}
The #font-face is loading a local file, but also, import in my experience doesn't work like how you expect. I'm on mobile so I can't get too detailed but I usually call the fonts url in the html using a tag in the head. This has the added benefit of the browser being able to pull that file in asynchronously, rather than after the css file loads, which will give you a small speed increase.
More than likely this code is actually failing for you too, but your browser has the font in cache and it's safe to use so it does. Or you have robot installed outright.
EDIT: Alright, I'm on a desktop now, and want to clarify some things.
#font-face defines a font and how it can be called. It gives it a name, where the font files are stored, and if it's considered italicized, normal, etc.
The Google Fonts file you are calling contains that information, it's whole purpose is to define the things you are putting in your #font-face lines.
As I said, #import is a bit tricky.
First and foremost, make sure your #import statement is the very first thing your CSS file contains. If you only have one #import, it should be the first line.
Using Google Fonts' other option, the HTML , will work marginally faster. The difference may stop your users from seeing a flicker of the wrong font on their first page load.
Remove the #font-face rules you have altogether, they are overwriting your imports.
As a best practice, give your font-family rule a fallback. font-family: 'Roboto thin', arial, sans-serif;
I found a gorgeous font called Slim Joe on a webpage whose link I posted below.
Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.
Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.
The webpage where it's included:
http://presentation.creative-tim.com/ (where it says "creative tim")
How the font looks like:
https://befonts.com/big-john-slim-joe-font.html
You can include fonts into your website by css #font-face rule.
This requires having either the otf or ttf font file on your server.
To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.
Declare it like
#font-face {
font-family: john-slim-joe;
src: url(myFontsFolder/john-slim-joe.ttf);
}
Use it like
p{
font-family: john-slim-joe;
}
To add a font to your website:
Locate the CSS file.
Create or locate your fonts folder.
Use the CSS's #font-face property to add your font file via url. This is also where you will name your font. Here's an example to follow from W3School.com's CSS #font-face Rule
After that, you can use the "font-family" property.
Hope this helps!
The website you are referring (http://presentation.creative-tim.com/) has imported the font files from given directory. Take Look at the Html header and you will find the following line:
<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
On this file, you can see how they imported and declared Slim-Joe font.
#font-face {
font-family: 'Slim-Joe';
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
font-weight: normal;
font-style: normal;
}
And usage by the nav bar css:
.navbar .navbar-brand {
font-weight: 600;
margin: 5px 0px;
padding: 20px 15px;
font-size: 20px;
font-family: "Slim-Joe";
letter-spacing: 0;
}
My website uses a font that Google Fonts does not have, so I used "#font-face". which looked like this.
#font-face {
font-family: 'Font';
src: local(example.ttc);
}
This method worked and my font that I uploaded was displayed. The only problem is that the font I'm using has 2 styles (inline and solid) and I don't know how to specify it (there is only one .ttc file for both styles). I tried font-style: solid and font-family: 'Font Solid'; and many other ways but none of them worked. Does anybody know how to specify only one style? Thanks!
PS- I replaced "Font" and "example.ttc" with their actual names in my real code.
PPS- Sorry if my question is vague or too specific. Just tell me and I'll clear it up.
I'm using #font-face that has to be given a large font-size. for example the font-size of the title is 54px which is normally so big, but in this font it appears medium.
So the problem is, while the page loads, the alternative font appears veeeery big and breaks the whole layout.
Is there a way i can specify a font-size for alternative font?
You might be able to use Modernizr. It adds classes to the <html> element which represent features that the browser supports. In this case, the class it adds for #font-face support is fontface.
What I would do is set the title size to what looks good for the alternative font, then nest the proper font-size, like so:
.title {
font-size: 20px;
font-family: arial, sans-serif;
}
.fontface .title {
font-size: 50px;
font-family: 'alternative-font', arial, sans-serif;
}
Though, even then I guess it might not change in the right order... Generally, I'd not worry about the layout looking funny while loading, but hopefully this helps.
I would try to retrieve the name of the font being used via JavaScript or jQuery and if it's not the #font-face font then adjust the font-size accordingly.
Edit:
Here's a JavaScript Font Detection plugin to test when the fallback font is being rendered.