DEV Community

hub
hub

Posted on

referencing the paths in CSS and Font - in WordPress

how are you adding the fonts?

one of the most common methods for loading locally hosted fonts will be through a font-face declaration in the theme stylesheet, although there are other possibilities and methods.

referencing them could be done with the following path customization;

/wp-content/themes/my_theme/assets/fonts/fontfile.ext

this might be one typical file location and referencing approach:

And besides this - the best/recommended practice is to create a child theme for making the theme.

so in any case of having a path issue for the font file, here some thoughts regarding the path/url in the style/css.

If the css file and the fonts data are (residing) exactly in same folder;
@font-face {
font-family: "CustomFont";
src: url('CustomFont.ttf');
}

If the fonts are (residing) just outside of the so called css folder:
@font-face {
font-family: "CustomFont";
src: url('../CustomFont.ttf');
}

...and additionally we have some more recommendations:

a. a so called absolute static path of the so called fonts file*/ @font-face

here we have a so called absolute static path of the so called fonts file*/
@font-face {
font-family: "CustomFont";
src: url('file:///C:/Users/Administrator/fonts/CustomFont.ttf');
}

b. another so called absolute static path of the so called fonts file*/ @font-face

/* Url path of fonts file*/
@font-face {
font-family: "CustomFont";
src: url('http://localhost/wordpress/Your-font-folder-path/CustomFont.ttf');
}

Top comments (0)