Woff font or css stylesheet - which one is in use?

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:

 <link rel="stylesheet" href="https://use.typekit.net/{YOUR_API_KEY}.css">
    <link rel="stylesheet" href="assets/vendors/liquid-icon/liquid-icon.min.css" />
    <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/theme-vendors.min.css" />
    <link rel="stylesheet" href="assets/css/theme.min.css" />
    <link rel="stylesheet" href="assets/css/themes/original.css" />
    <!-- Head Libs -->
    <script async src="assets/vendors/modernizr.min.js"></script> 

and the CSS <assets/css/themes/original.css> :

@font-face {
  font-family: 'Cerebri Sans';
  src: url("../../fonts/cerebri-sans.woff2") format("woff2"), url("../../fonts/cerebri-sans.woff") format("woff");
  font-weight: 400;
  font-style: normal;

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>
.h1 {
font-family: "Times New Roman", Times, serif;

<h1>This is a heading</h1>


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

and them call them up in the CSS

font-family: “Sofia”;

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.

Can you elaborate on this?

In the end, woff is a file format for web fonts.

You can read more about web font format on Wikipedia, it’s an interesting read.

My first guess regarding your HTML template:
It’s probably old and not well maintained.

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

1 Like

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.

This is just the CSS font-face declaration, it isn’t the font that’s used

1 Like

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

What is complicating things for you is there are many new things at once.

So let’s add them up slowly

I believe a good start is to create a simple index.html and an index.css file to experiment.

And do some test cases like this:

  1. do not specify a font, and find which one is rendered
  2. use a web safe font, be sure that is rendered.
  3. use google api to load:
    i. one way using the link tag
    ii. other way using just the css import or font face

And go back to what @DanCouper said.