Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Web services | Web sites | Change font to custom @font-face on Wordpress
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

Change font to custom @font-face on Wordpress

Last time we created a @font-face kit with an online @font-face generator, this time we will put a no-web font to a Wordpress site.

 
  Author: mat | Version: | 15th July 2012 |  
 
 
1.
 

I want to change this plain old boring font for my vertical menu to something more funky.

Click here to find out how to create a @font-face kit for a custom non-web font.

 
 
2.
 

Now upload the fonts (files with .eot, .svg, .ttf, .woff extensions) via ftp ...

Click here to find out how to use the FileZilla ftp client for transferring files from or to a website.

 
 
3.
 

... into the home folder of the theme you are using on Wordpress.

I'm using a theme called solo so I uploaded the font files into /wp-content/themes/solo folder on my Wordpress web server.

Click here to find out how to upload files via ftp client.

 
 
4.
 

We need to edit the style.css.

Style.css is also in the theme home folder. You can download it again via ftp and edit it on your computer. It's always a good idea to backup or rename the style.css file before you changing it.

 
 
5.
 

Open style.css in a text editor.

You can use Dreamweaver or some other text/code editing software. Try out Notepad++ it's pretty awesome and free.

Put the following lines somewhere at the beginning of the code:

@font-face{
    font-family: 'suplexmentary_comic_nc-webfont';
    src: url('suplexmentary_comic_nc-webfont.eot');
    src: url('suplexmentary_comic_nc-webfont.eot?#iefix') format('embedded-opentype'),
    url('suplexmentary_comic_nc-webfont.woff') format('woff'),
    url('suplexmentary_comic_nc-webfont.ttf') format('truetype'),
    url('suplexmentary_comic_nc-webfont.svg#webfont') format('svg');
 }


In your case it's going to be some other font, so instead of suplexmentary_comic_nc-webfont, you must put the name of your own font. The easiest way is to open the stylesheet.css that came with your @font-face kit and copy/paste the lines to style.css. Don't forget the closing bracket }.

 
 
6.
 

Now we need to change the font of the text on the website. All you need to do now is to find your style settings of the div or the part of your homepage where you want to change the font and enter font-family of your new custom font:

font-family: suplexmentary_comic_nc-webfont;

suplexmentary_comic_nc-webfont is going to be something else in your case.

Save all the files you changed.




 
 
7.
 

And upload them to a website server on the same location you downloaded them from.

 
 
8.
 

And if everything went according to a plan, when you refresh your website, you should be able to see your new fonts.

 
 
 
   
  Please login to post a comment
  Click to open user profile  
izamazur, 12th Aug 2024, 4:12 PM
Thank you!
 
 
  Click to open user profile  
ahr147, 1st Jul 2025, 5:34 AM
https://www.niketw.com/ Nike鞋https://www.niketw.com/ 耐吉https://www.niketw.com/ 運動鞋https://www.niketw.com/ nike 官網​https://www.niketw.com/ nike air force 1https://www.niketw.com/ nike dunkhttps://www.niketw.com/ nike snkrshttps://www.niketw.com/ nike vomero 5https://www.niketw.com/ nike 鞋子​https://www.niketw.com/ nike x sacaihttps://www.niketw.com/ nike 倒 鉤https://www.niketw.com/ nike air​https://www.niketw.com/ nike dunk lowhttps://www.niketw.com/ nike 慢跑 鞋https://www.niketw.com/ nike官網dunkhttps://www.niketw.com/ nike官網台灣https://www.niketw.com/nike慢跑鞋 nike慢跑鞋https://www.niketw.com/nike熱賣跑步.... nike熱賣跑步鞋https://www.niketw.com/nike阿甘鞋 nike阿甘鞋https://www.niketw.com/nike阿甘鞋 阿甘鞋nike官網https://www.niketw.com/nike阿甘鞋 阿甘nikehttps://www.niketw.com/nike阿甘鞋 nike阿甘鞋女https://www.niketw.com/NikeAcg Nike Acghttps://www.niketw.com/NikeAcg nike acg gore texhttps://www.niketw.com/NikeAcg Nike ACG Mountain Fly 2https://www.niketw.com/NikePegasus Nike Pegasushttps://www.niketw.com/NikePegasus nike pegasus 39https://www.niketw.com/NikePegasus nike pegasus 40https://www.niketw.com/NikePegasus nike air zoom pegasushttps://www.niketw.com/NikePegasus nike pegasus 38https://www.niketw.com/NikePegasus air zoom pegasushttps://www.niketw.com/NikePG Nike PGhttps://www.niketw.com/NikePG Nike PG x Play Stationhttps://www.niketw.com/NikePG Nike Pg 2.5https://www.niketw.com/NikePG Nike PG 6 EPhttps://www.niketw.com/NikeAirHuarache Nike Air Huarachehttps://www.niketw.com/NikeAirHuarache nike air huarache黑武士https://www.niketw.com/NikeAirHuarache nike air huarache runnerhttps://www.niketw.com/NikeAirHuarache nike air huarache ultra black red​https://www.niketw.com/NikeFree Nike Freehttps://www.niketw.com/NikeFree nike free runhttps://www.niketw.com/NikeFree nike free metconhttps://www.niketw.com/NikeFree nike free 5.0https://www.niketw.com/NikeFree Nike Free RNhttps://www.niketw.com/NikeFree nike free rn 5.0https://www.niketw.com/nikeslippers nike拖鞋https://www.niketw.com/nikeslippers NIKE Jusr Doithttps://www.niketw.com/nikeslippers Nike Calm Slide Benassihttps://www.niketw.com/nikeslippers Nike Calm Mulehttps://www.niketw.com/niketee nikeT恤https://www.niketw.com/niketee Nike T恤 經典短袖https://www.niketw.com/nikepants nike褲子https://www.niketw.com/nikepants Nike 運動 褲https://www.niketw.com/nikejersey nike球衣https://www.niketw.com/nikejersey Nike NBA球服套裝https://www.niketw.com/nikejersey Nike NBA V領https://www.niketw.com/nikejersey Nike NBA 湖人 V領 8號https://www.niketw.com/nikejersey Nike NBA球服套裝 24號https://www.niketw.com/nikehats nike帽子https://www.niketw.com/nikehats Nike 棒球帽https://www.niketw.com/nikehats Nike 鸭舌帽https://www.niketw.com/nikebags nike包包https://www.niketw.com/nikebags Air Jordan手提挎包https://www.niketw.com/nikebags Nike單肩包https://www.niketw.com/nikebags Nike 腰包https://www.niketw.com/nikebags Nike 後背包https://www.niketw.com/NikeAirForce Nike Air Forcehttps://www.niketw.com/NikeAirForce 空軍一號鞋子https://www.niketw.com/NikeAirForce Air Force聯名https://www.niketw.com/NikeAirForce Air Force熱銷https://www.niketw.com/NikeAirForce Air Force新款https://www.niketw.com/NikeAirForce Nike Air Force新款https://www.niketw.com/NikeAirForce Nike Air Force熱銷款https://www.niketw.com/NikeAirForce Nike Air Force經典款https://www.niketw.com/NikeAirForce nike air force 聯名https://www.niketw.com/NikeAirForce Air Force 1 07https://www.niketw.com/NikeAirForce nike air force 女https://www.niketw.com/NikeAirForce nike air force 1 shadowhttps://www.niketw.com/NikeAirForce nike air force 男https://www.niketw.com/NikeKD Nike KDhttps://www.niketw.com/NikeKD nike kd trey 3https://www.niketw.com/NikeKD Nike Kevin Duranthttps://www.niketw.com/NikeKD Nike KD 17https://www.niketw.com/NikeBook Nike Bookhttps://www.niketw.com/NikeBook nike book 1https://www.niketw.com/NikeBook nike book 1台灣https://www.niketw.com/NikeBook Nike Kook 1 EPhttps://www.niketw.com/NikeBook Nike Book 1 Devin Bookerhttps://www.niketw.com/NikeBlazer Nike Blazerhttps://www.niketw.com/NikeBlazer nike sb blazer​https://www.niketw.com/NikeBlazer nike blazer lowhttps://www.niketw.com/NikeBlazer blazer nikehttps://www.niketw.com/NikeBlazer nike blazer mid 77https://www.niketw.com/NikeBlazer nike blazer 77https://www.niketw.com/NikeBlazer nike blazer historyhttps://www.niketw.com/NikeBlazer sacai x nike blazer in blackhttps://www.niketw.com/NikeBlazer nike sb zoom low blazerhttps://www.niketw.com/nikeTC7900 nike tc 7900官網https://www.niketw.com/nikeTC7900 TC 7900https://www.niketw.com/nikeTC7900 nike tc 7900https://www.niketw.com/NikeAirMax Nike Air Maxhttps://www.niketw.com/NikeAirMax nike air max 90https://www.niketw.com/NikeAirMax nike air max 97https://www.niketw.com/NikeAirMax nike air max plushttps://www.niketw.com/NikeAirMax nike air max 270https://www.niketw.com/NikeAirMax nike air max 1https://www.niketw.com/NikeAirMax nike air max 1997https://www.niketw.com/NikeAirMax nike air max plus 3https://www.niketw.com/NikeAirMax nike air max男https://www.niketw.com/NikeAirMax nike air max女https://www.niketw.com/NikeAirMax Air Max 97https://www.niketw.com/NikeAirMax Air Max 270https://www.niketw.com/NikeAirMax Air Max 1https://www.niketw.com/NikeAirMax Air Max 2090https://www.niketw.com/NikeAirMax Nike Air vapormaxhttps://www.niketw.com/NikeAirMax Air Max 90https://www.niketw.com/NikeRosheRun Nike Roshe Runhttps://www.niketw.com/NikeRosheRun nike roshe run hi sneakerboothttps://www.niketw.com/NikeRosheRun nike roshe run blackhttps://www.niketw.com/NikeRosheRun nike roshe run 銀 勾https://www.niketw.com/NikeRosheRun nike 鞋 roshe runhttps://www.niketw.com/NikeRosheRun Roshe Runhttps://www.niketw.com/NikeZoom Nike Zoomhttps://www.niketw.com/NikeZoom nike zoom vomero 5https://www.niketw.com/NikeZoom nike air zoomhttps://www.niketw.com/NikeZoom nike zoom xhttps://www.niketw.com/NikeZoom nike zoom vomerohttps://www.niketw.com/NikeZoom nike zoom跑鞋https://www.niketw.com/nikeAirJordan Air Jordanhttps://www.niketw.com/nikeAirJordan air jordan 1https://www.niketw.com/nikeAirJordan air jordan 1 lowhttps://www.niketw.com/nikeAirJordan nike air jordanhttps://www.niketw.com/nikeAirJordan air jordan 4​https://www.niketw.com/nikeAirJordan Nike Air Jordan 1 Highhttps://www.niketw.com/nikeAirJordan air jordan 1 low灰白https://www.niketw.com/nikeAirJordan AJ11https://www.niketw.com/nikeAirJordan AJ1https://www.niketw.com/NikeKobe Nike Kobehttps://www.niketw.com/NikeKobe Nike Book 1https://www.niketw.com/NikeKobe Nike Kook 1 EPhttps://www.niketw.com/NikeKobe Nike Book 1 Devin Bookerhttps://www.niketw.com/NikeKobe kobe 4https://www.niketw.com/NikeKobe kobe 5https://www.niketw.com/NikeKobe kobe 6https://www.niketw.com/NikeKobe kobe 11https://www.niketw.com/NikeKobe kobe 8https://www.niketw.com/NikeKobe kobe 7https://www.niketw.com/NikeLebron Nike Lebronhttps://www.niketw.com/NikeLebron nike lebron 3 qshttps://www.niketw.com/NikeLebron nike lebron soldier 1https://www.niketw.com/NikeLebron nike lebron 20https://www.niketw.com/NikeLebron nike lebron 21https://www.niketw.com/NikeKyrie Nike Kyriehttps://www.niketw.com/NikeKyrie Kyrie 7 EPhttps://www.niketw.com/NikeKyrie Nike Kyrie 4 EPhttps://www.niketw.com/NikeKyrie Uncle Drew 4https://www.niketw.com/NikeKyrie Kyrie Irving 8https://www.niketw.com/NikeDunk Nike Dunkhttps://www.niketw.com/NikeDunk nike dunk low​https://www.niketw.com/NikeDunk nike dunk low灰白https://www.niketw.com/NikeDunk nike sb dunkhttps://www.niketw.com/NikeDunk nike dunk low retrohttps://www.niketw.com/NikeDunk nike dunk sbhttps://www.niketw.com/NikeDunk nike sb dunk lowhttps://www.niketw.com/NikeDunk nike dunk low熊貓https://www.niketw.com/NikeDunk nike dunk low grey foghttps://www.niketw.com/NikeDunk nike dunk 2025https://www.niketw.com/NikeCourt Nike Courthttps://www.niketw.com/NikeCourt nike court vision女https://www.niketw.com/NikeCourt nike court visionhttps://www.niketw.com/NikeCourt nike court legacyhttps://www.niketw.com/NikeCourt nike court borough low 2https://www.niketw.com/NikeCourt nike court vision lowhttps://www.niketw.com/NikeCourt nike court borough lowhttps://www.niketw.com/NikeCourt nike court vision altahttps://www.niketw.com/NikeCourt nike court royalehttps://www.niketw.com/NikeCourt court nikehttps://www.niketw.com/NikeSacaiNike熱.... nike x sacaihttps://www.niketw.com/NikeSacaiNike熱.... sacai x nike vaporwafflehttps://www.niketw.com/NikeSacaiNike熱.... Nike Vaporwaffle x sacaihttps://www.niketw.com/NikeSacaiNike熱.... Sacai x Nike Cortez 4.0https://www.niketw.com/NikeSacaiNike熱.... NIKE SACAIhttps://www.niketw.com/NikeSacaiNike熱.... nike sacai官網https://www.niketw.com/NikeSacaiNike熱.... nike sacai哪裡買https://www.niketw.com/NikeSacaiNike熱.... Sacaihttp://www.relxh.com/relx 電子菸 relxhttp://www.relxh.com/relx relx 電子菸價格http://www.relxh.com/relx relx 電子菸台灣http://www.relxh.com/relx 電子菸主.... 煙彈口味推薦http://www.relxg.com/relx relx 煙彈哪裡買http://www.relxg.com/relx 悅刻煙彈.... 煙彈購買http://www.relxg.com/relx relx 煙彈台灣https://www.twsneakers.top/nike-lebron-2.... Nike LeBron 21 EP實戰評測:LBJ低幫革新與性能解析
 
 
  Click to open user profile  
caver32, 1st Jul 2025, 12:10 PM
vjsdlk
 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO