Title: CSS code – custom fonts Last modified: March 4, 2020 --- # CSS code – custom fonts * [wsamvanderlinden](https://wordpress.org/support/users/wsamvanderlinden/) * (@wsamvanderlinden) * [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/) * Hello there! * For my website, I’m trying to use my own fonts which I’ve uploaded using File Manager. I’ve tried the following code, to use 3 different fonts for different areas on my website: * ``` @font-face { font-family: ClarendonLTStd-Light; src: url(https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd-Light.ttf)format('truetype'); font-weight: normal; } @font-face { font-family: ClarendonLTStd; src: url(https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd.ttf)format('truetype'); font-weight: normal; } @font-face { font-family: KasseFLF-Bold; src: url(https://elixirlife.nl/wp-content/themes/jupiterx/fonts/KasseFLF-Bold.ttf)format('truetype'); font-weight: normal; } body{ font-family:ClarendonLTStd-Light;} links{ font-family:ClarendonLTStd-Light;} h1{ font-family:ClarendonLTStd;} h2, h3, h4, h5, h6, h7{ font-family:KasseFLF-Bold;} ``` * Could anyone please help out and let me know what I’ve done wrong? 😮 * Thanks you in advance! * Best regards, Wouter - This topic was modified 6 years, 2 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/). * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-code-custom-fonts%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 6 replies - 1 through 6 (of 6 total) * [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/) * (@jaycbrf) * [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/#post-12508495) * Font names have to be in “quotation marks” * [Michael](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/#post-12508583) * where did you add this CSS? * it seems to be not visible when checking headlines with ‘inspect element’. * there are also some elementor styles setting fonts for the headings etc… * your styles are way to un-selective to overwrite those elementor styles or most other styles… * [Joy](https://wordpress.org/support/users/joyously/) * (@joyously) * [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/#post-12508626) * I tried to test your font files in this page, using the Developer Tools of the browser and fixing what small problems I see like no space between the url and the format. But it won’t load the font because of the Cross Origin problem, so I can’t test it remotely. Your CSS for `links` selector won’t work. It would have to be `a`. And usually you more than one font, so that there can be a fallback, like `Arial,Helvetica,sans-serif`. I don’t know if the name of font should match what is in the file, but if you look at the Google fonts on this page using the Developer Tool in your browser, you will see that the name in font-family is different than the local font name and the file name in the url. * ``` @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-U1Ug.ttf) format('truetype'); } ``` * Thread Starter [wsamvanderlinden](https://wordpress.org/support/users/wsamvanderlinden/) * (@wsamvanderlinden) * [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/#post-12511260) * Thank you all for your replies! [@jaycbrf](https://wordpress.org/support/users/jaycbrf/) I’ve applied those, which resulted in the lines being highlighted in red, looks good to me * [@alchymyth](https://wordpress.org/support/users/alchymyth/) I put the code style. css (Appearance -> Theme editor) Perhaps you’re right and I should just stick with the ones we’ve got, if this doesn’t work out I certainly will * [@joyously](https://wordpress.org/support/users/joyously/) Thanks Joy, I didn’t fully comprehend the last bit, I’ve tried changing the code accordingly: * `} @font-face { font-family: “ClarendonLTStd-Light”; src: url([https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd-Light.ttf)format(‘truetype’](https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd-Light.ttf)format(‘truetype’);); font-weight: normal; } @font-face { font-family: “ClarendonLTStd”; src: url([https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd.ttf)format(‘truetype’](https://elixirlife.nl/wp-content/themes/jupiterx/fonts/ClarendonLTStd.ttf)format(‘truetype’);); font-weight: normal; } @font-face { font-family: “KasseFLF-Bold”; src: url([https://elixirlife.nl/wp-content/themes/jupiterx/fonts/KasseFLF-Bold.ttf)format(‘truetype’](https://elixirlife.nl/wp-content/themes/jupiterx/fonts/KasseFLF-Bold.ttf)format(‘truetype’);); font-weight: normal; } * body{ font-family:”ClarendonLTStd-Light”;} a{ font-family:”ClarendonLTStd-Light”;} h1{ font-family:”ClarendonLTStd”;} h2, h3, h4, h5, h6, h7{ font-family:”KasseFLF- Bold”;} * I don’t think it did the trick though, I therefore might just go with one of the Google fonts. * Best regards, Wouter - This reply was modified 6 years, 2 months ago by [wsamvanderlinden](https://wordpress.org/support/users/wsamvanderlinden/). * [Michael](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/#post-12512983) * > I put the code style.css (Appearance -> Theme editor) * that is the main reason your CSS did not work – your theme actually does _not_ use **style.css** in the site; * try adding the CSS via ‘Appearance’ – ‘Customize’ – ‘Additional CSS’ * and possibly inforce it by adding `!important` to the styles to overwrite all interfering styles added by the elementor etc: * ``` body { font-family: ClarendonLTStd-Light!important; } links { font-family: ClarendonLTStd-Light!important; } h1 { font-family: ClarendonLTStd!important; } h2, h3, h4, h5, h6, h7 { font-family: KasseFLF-Bold!important; } ``` * also, the [developers of your theme might be useful in supporting any further questions](https://themeforest.net/item/jupiter-multipurpose-responsive-theme/5177775/support). * Thread Starter [wsamvanderlinden](https://wordpress.org/support/users/wsamvanderlinden/) * (@wsamvanderlinden) * [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/#post-12513335) * [@alchymyth](https://wordpress.org/support/users/alchymyth/) Amazing, this is just what I needed! Thank you so much 🙂 * Check it out: elixirlife.nl * P.S. My designer and I thought it would be cool to match the product typography on the website Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘CSS code – custom fonts’ is closed to new replies. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 6 replies * 4 participants * Last reply from: [wsamvanderlinden](https://wordpress.org/support/users/wsamvanderlinden/) * Last activity: [6 years, 2 months ago](https://wordpress.org/support/topic/css-code-custom-fonts/#post-12513335) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics