Help using local fonts?

[JesusJMUJI]

I'm currently using mkdocs to build a website, but I want to use a font that is not available in Google Fonts due to licensing restrictions.
I read the customizing the font article, but I really don't understand how it should be done.

The @ font-face command has two properties, font-family which should have the name of the font? and where should the src pointing at if it's local?

Also then, there's :root and where should I put that, on the extra.css?

It's confusing for someone that it's not very well versed on web dev, just the basics. I could use some help, please.

Note: I've tried finding a solution, but I haven't found anything that solves this issue.

[alexvoss]

As far as I know, if you want to use an alternative font then you will need to place it into the docs directory. The src attribute in the CSS should then be the path starting from docs. So, if you put the font into, say, docs/assets/fonts/myfont.otf then the src attribute would be assets/fonts/myfont.otf. There are websites that offer fonts under various licenses. This is the same essentially as for images, CSS files, etc.

[JesusJMUJI]

So I've tried your solution and doesn't seem to be working, also the font is a font family, with bold, italics and such; shouldn't I need to declare that the font has other types apart from just regular? The font I intend to use has a variable option too.

I'll include the snippet that I did:

@font-face {
    font-family: "NameSans";
    src: "assets/fonts/NameSansStatic/AT-NameSansText-Regular.Trial.otf";
  }

:root {
  --md-text-font: "NameSans"; 
}

[alexvoss]

This worked for me. Note that the path needs to be enclosed in url(...):

@font-face {
  font-family: "Agbalumo";
  src: url("/assets/fonts/Agbalumo-Regular.ttf") format('truetype');
}

:root {
  --md-text-font: "Agbalumo"; 
}

Caveat: I am not a web designer, so cannot comment on whether this is the right way of handling fonts. Looking at the some documentation for @font-face, it seems there could be more things to consider. Hope this helps, though.

[alexvoss]

Right, it has taken a little bit longer to get this right but there are now examples for using custom fonts as well as for using built-in browser fonts. Any feedback on these much appreciated.

[cedric-at-list]

It still doesn't work for me.

This is part of my extra.css:

@font-face {
    font-family: "test";
    /* src: "docs\res\fonts\Matemasie-test.ttf" format('truetype'); */
    src: url('docs\res\fonts\Matemasie-test.ttf') format('truetype');
}
/* :root {}  doesn't do anything */
* {
    font-family: "test" !important;
    --md-text-font: "test" !important;
    color: yellow !important;
}

The text of the website gets changed to yellow.
The font gets changed from the default mkdocs-material font to a certain default browser font I think,
but not the font that I specified.

In case you wonder if I have specified the wrong path to the .ttf-file:

Must I still do something in mkdocs.yml?

theme:
  # font: false
  # font:
  #   text: Matemasie # this pulls it directly from Google Fonts via the internet
    # text: test # doesn't work
    # text: bebasNeueBold

[alexvoss]

Hi, couple of things: you need to remove docs from the filename path and also change the backslashes to forward slashes. The use of a backslash as a path separator is exclusive to the Windows filesystem. Everywhere else you use forward slashes. Hope that fixes it.

[cedric-at-list]

Hi, couple of things: you need to remove docs from the filename path and also change the backslashes to forward slashes. The use of a backslash as a path separator is exclusive to the Windows filesystem. Everywhere else you use forward slashes. Hope that fixes it.

This did it for me (also including the / at the beginning of the file path), thanks a lot!

[dominiquelaurain]

I am newbie for mkdocs and mkdocs-material, and watched last youtube tutorial video this week.

Tutorial is very good, but I want an offline documentation website (in Oracle Virtual Box virtual machine).

I have two issues : one is with mermaid (diagrams not displayed: source text is displayed rather than image...when using "mkdocs serve" http web server...maybe page is displayed correctly on github web server) and one with "mkdocs build" is not copying to assets directory when using plugin offline, the google fonts CSS file (the file is in .cache).

Pip freeze extract :

mkdocs==1.6.1
mkdocs-get-deps==0.2.0
mkdocs-material==9.5.43
mkdocs-material-extensions==1.3.1
mkdocs-mermaid2-plugin==1.2.1

Extract of index.html (such line appears in other html files) refering to not found file by browser (Mozilla/Firefox) :

index.html:        <link rel="stylesheet" href="assets/external/fonts.googleapis.com/css.a5ace9fc.css">

Extract of mkdocs.yml:

 font:
    text: Merriweather Sans
    code: Red Hat Mono

plugins:
    - offline
    - search
    - privacy

Stop server (started with "mkdocs serve" ) and run "mkdoc build", then checkout files into site directory : no css.a5ace9fc.css file.

A work around is to copy from .cache the CSS file into site files tree.

[kamilkrzyskow]

Hello @dominiquelaurain,
thanks for the detailed analysis and info, before checking anything else, I've noticed you're using 9.5.43:

• https://github.com/squidfunk/mkdocs-material/releases/tag/9.5.44

9.5.44 has a CSS font fix, I guess this should help you.

[dominiquelaurain]

Thanks Kamil ;-) I will try to upgrade to 9.5.44. For the information : I use a nginx docker image to test the standalone web site. The tutorial video is teasing on uploading the web site static files to github, which is an easy way to have it online on the Internet....but the tutorial miss explanations about plugins.

[dominiquelaurain]

Upgrade worked fine (CSS file is in assets files tree after "mkdocs build" and plugins "search, offline and privacy"):

pip install --force-reinstall -v "mkdocs-material[imaging]==9.5.44"

I dont know why I had previously:

pip install mkdocs-material
Collecting mkdocs-material
  Downloading mkdocs_material-9.5.43-py3-none-any.whl.metadata (18 kB)
...

My OS release is "Ubuntu 20.04.1 LTS"

;-)