I try to edit a HTML template, more exactly, the font. If I understand correctly , the font that comes from google is like inserting a url video,it is hosted by another site but rendered by my website. In About page I have this HTML code:
First, this line of code <link rel="stylesheet" href="https://use.typekit.net/{YOUR_API_KEY}.css"> is not in use, right? Then , the <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css" /> is a big chunk of code with hundreds of lines starting with : Font Awesome 4.7.0 by @ - htt p://fontawesome. io - @fontawesome as a comment. So if I am not mistaken the template has self hosted fonts, downloaded in a special css stylesheet from the fontawesome website.
But in the inspect element feature I identified that the font-family comes from the Original Css stylesheet above.And there is no “font-awesome”.Is just the “cerebri-sans.woff2” which I didn’t find in the folder of the website. There is a word document named “cerebri-sans” with a link to a page with the message “Page not found”.
So my question is : Where the font comes from? And how can I change it?
P.S. Sorry if the text is difficult to understand, English is not my native language.
So my question is : Where the font comes from? And how can I change it?
There are pre-defined fonts who are implemented inside html
Think about opening up a word document which has already arial pre installed for u to use
u can change the font type using CSS example
<!DOCTYPE html>
<html>
<head>
<style>
.h1 {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
To get even more fonts u can get them from google
those are external and need to be linked
You can do this by adding a link in the
Is “cerebri-sans” one of the safe fonts? I searched on google and there are 15-16 safe fonts but “cerebri-sans” doesn’t look to be one of them.
Could you tell why there are so many fonts references but none of them are wroking? I understand that woff fonts help with the speed of the website so I am curious why woudn’t that work.
Yeah, is a template. I don’t understand why there should be a assets/css/theme.min.css stylesheet containing hundreds of lines of code if isn’t going to do anything.
fontawesome is an icon font. There are hundreds of lines because there are hundreds of icons. It won’t show when you check what font the text is using because the text in your site is not icons. If you remove the fontawesome stuff, you’ll lose any icons you have.
typekit is a font delivery service, like Google Fonts. However it was discontinued as a standalone free service, you need to be subscribed to Adobe Creative Cloud, which indicates your template is several years old and out of date, you’ll want to delete that line.
the @font-face declaration indicates there should be a font file in “assets/fonts” called “ceribi-sans.woff2”. Ceribi Sans is a font you need to buy, it’s not free, so if it wasn’t included in whatever you have in front of you, just delete that declaration and use something else (unless it’s really important and you need it. In which case you need to buy it).
you change fonts by using
font-family: "Some Font Family Name", "Fallback font", "Another fallback", etc;`
in the CSS, like
font-family: "Helvetica", "Arial", sans-serif;
It sounds as if you have something pretty old and out of date that hasn’t been maintained for a long time, with missing bits and pieces. Is it something you’re have to use, or is it something you just downloaded.
Thank you so much, you really clarified things. The theme is one that I paid for so I guess is not the best investment. I have one more misunderstanding. If cerebri-sans is not in use, and in Inspect Element I have font-family: 'Cerebri Sans', sans-serif; that means that the website loads a random sans-serif? And wouldn’t Inspect Element specify it? Also, if Cerebri Sans doesn’t work , shouldn’t be crossed?
It doesn’t load a random font, it loads whatever the system specifies as a fallback for sans-serif.
Anyway, if it’s Chrome, go to the elements tab, on the right there should be some tabs, and “styles” tab should be selected, select “computed” instead, at the bottom it’ll say what the rendered font is. I think you’re just looking at the font-face declaration in the styles tab. If it is Cerebri, then it’s loading the font from somewhere that’s linked in your files
I searched in computed and I have the same thing as in styles : font-family: 'Cerebri Sans', sans-serif from original.css. I don’t think is Cerebri Sans because I looked on the theme template on the website that I bought it from and although in the inspect element is the same thing, the typography doesn’t look the same.
I don’t have that “Rendered Fonts” section in Chrome Inspect Element, I don’t know why. I found the fonts in Firefox but I am confused. I have Arial and Times New Roman, sans-serif and serif and it’s obvious that the headers are in serif font and the rest in Arial. How can the system load serif font if the fallback is specified as sans-serif in all cases?
In Firefox just select an element and check the font, it’s easier to see than Chrome. I mean, you don’t have the paid font, that’s pretty clear, so going back to the original question just use whatever fount you want that you do have
