{"id":753,"date":"2013-07-15T00:11:51","date_gmt":"2013-07-14T23:11:51","guid":{"rendered":"http:\/\/wphelpclub.com\/blog\/?post_type=postidea&p=753"},"modified":"2017-01-25T11:46:49","modified_gmt":"2017-01-25T10:46:49","slug":"wordpress-add-font","status":"publish","type":"post","link":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/","title":{"rendered":"How to Add Any Font You Want to Your Website"},"content":{"rendered":"

\"wordpressHave you ever come across a font on a website and wish that you could use it for your own site but just don’t know how to do it? This WordPress Add Font Tutorial should help!<\/p>\n


\nFollow this simple step by step tutorial where I’m going to show you how to add any font you want on your site (as long as you have access to the font file).<\/p>\n

<\/h1>\n

<\/h1>\n

<\/h1>\n

<\/h1>\n

1) Get the font file<\/span><\/h1>\n

There are many great fonts available for free. There are the google fonts of course but I also like to use http:\/\/www.fontsquirrel.com\/<\/a> as a free resources for font. http:\/\/www.dafont.com\/<\/a> is another popular free font website. Just find the font you like and upload it to your computer.<\/p>\n

 <\/p>\n

2) Upload the font(s) to Webfont Generator<\/span><\/h1>\n

Font squirrel has a great free tool that lets you generate the code needed to easily add a font to your site.<\/p>\n

Once you have the font file, go to http:\/\/www.fontsquirrel.com\/<\/a> and click on Webfont Generator<\/a>
\n\"addfont\"<\/p>\n

Click on add Fonts and add 1 or more font files (otf, ttf are ok formats) and check the box “yes the fonts I’m uploading are legally eligible for web embedding” checkbox.<\/p>\n

 <\/p>\n

3) Click on Download your kit<\/span><\/h1>\n

 <\/p>\n

\"addfont2\"<\/p>\n

 <\/p>\n

Click on the “download your kit” button to download a zip file to your computer. The name of the file will look something like this : webfontkit-20130714-183422.zip<\/p>\n

 <\/p>\n

\"addfont3\"<\/a><\/p>\n

 <\/p>\n

<\/h1>\n

4) Unzip the webfont file to see all the files contained in it<\/span><\/h1>\n

To unzip the file, just double clikck on it. You’ll see that it contains several files and a folder.<\/p>\n

\"fontfiles\"<\/a><\/p>\n

the 4 files that end with eot, svg, ttf and woff and 4 different formats of the font. You will need to copy these files on your server (see next step).
\nThe stylesheet.css file contains the css that you will need to add to your website in order to be able to use the font.<\/p>\n

 <\/p>\n

5) Copy the font files to your server<\/span><\/h1>\n

You will need to login to your hosting control panel or ftp account in order to access the server where your wordpress site is installed.
\nOnce in your wordpress folder (this is where you can see the folders wp_content, wp_includes,…), click on create new folder and name it “fonts”.<\/p>\n

 <\/p>\n

\"addfont4\"<\/p>\n

Click on it and upload the 4 font files that you have in your webfont kit.( You’ll have more files if you added more than 1 font in the webfont generator).<\/p>\n

<\/h1>\n

6) Add the css code to your WordPress site<\/span><\/h1>\n

Open the stylesheet.css file that is in the webfont kit folder. It should look like this (you’ll have more than one font face if you downloaded more than 1 font in the webfont generator) :
\n\"addfont5\"<\/p>\n

The code assumes that you have put your font files directly on your public_html folder, which is not good practice, you want to keep your files organized, that’s why we put all our fonts in the folder called fonts. So now we need to change the path of the fonts so that the browsers know where to find them.<\/p>\n

So the code below needs to be modified:<\/p>\n

@font-face {
\nfont-family: ‘misoregular’;
\nsrc: url(‘miso-webfont.eot’);
\nsrc: url(‘miso-webfont.eot?#iefix’) format(’embedded-opentype’),
\nurl(‘miso-webfont.woff’) format(‘woff’),
\nurl(‘miso-webfont.ttf’) format(‘truetype’),
\nurl(‘miso-webfont.svg#misoregular’) format(‘svg’);
\nfont-weight: normal;
\nfont-style: normal;<\/p>\n

}<\/p>\n

now becomes<\/span><\/h2>\n

@font-face {
\nfont-family: ‘misoregular’;
\nsrc: url(‘http:\/\/y<\/span>ourwebsite.com\/fonts\/miso-webfont.eot<\/span>‘);
\nsrc: url(‘http:\/\/yourwebsite.com\/fonts\/miso-webfont.eot<\/span>?#iefix’) format(’embedded-opentype’),
\nurl(‘http:\/\/yourwebsite.com\/fonts\/miso-webfont.woff<\/span>‘) format(‘woff’),
\nurl(‘http:\/\/yourwebsite.com\/fonts\/miso-webfont.ttf<\/span>‘) format(‘truetype’),
\nurl(‘http:\/\/yourwebsite.com\/fonts\/miso-webfont.svg<\/span>#misoregular’) format(‘svg’);
\nfont-weight: normal;
\nfont-style: normal;<\/p>\n

}
\nDepending on the theme that you are using, check the theme options to see if you can add your own css. If you’re using headway you can go to the design editor and click on live css then add the code to the top of the live css.<\/p>\n

If you can’t find a place to add custom css on your theme, you should create a child theme as it is not good practice to modify the theme itself (for obvious future update issues). If you don’t know how to create a child theme, ask a developer to do it or if you want to take the risk to modify your existing theme css file, I’m providing instructions on how to do so. (WARNING: if you decide to do that, make a copy of your css file before you modify it<\/span>).<\/p>\n

Your theme css file can be edited by going to your WordPress dashboard under Appearances\/Editor and scrolling down the bottom right to style.css. \u00a0If you have a child theme, it will be the same.
\n\"addfont6\"<\/p>\n

One you’ve added your code \u00a0click on “Update File”.
\n\"addfont8\"<\/p>\n

<\/h1>\n

7) How to use the font on a post or page<\/span><\/h1>\n

Now you are ready to use the new font on any post or page on your site.<\/p>\n

You’ll need to use the font-family field from the css code you added.<\/p>\n

On any page or post you can then do:<\/p>\n

\"addfont7\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

And we’re done!!!<\/p>\n

I hope you loved this WordPress Add Font tutorial!<\/h2>\n

Adding fonts to your website should have no more secrets for you now! If you have any questions, post them below, I’d be happy to answer them \ud83d\ude42<\/p>\n

If you found this WordPress Add Font tutorial helpful please share it with your friends!!<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever come across a font on a website and wish that you could use it for your own site but just don’t know how to do it? This WordPress Add Font Tutorial should help!<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4,6],"tags":[],"class_list":["post-753","post","type-post","status-publish","format-standard","hentry","category-general-news","category-wordpress-tips"],"yoast_head":"\nWordPress Add Font Tutorial: how to Add any Font to Your Website<\/title>\n<meta name=\"description\" content=\"WordPress Add Font Tutorial: How to Add any Font to Your Website, the easy way, you can do it in no time.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nathalie DOREMIEUX\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/\"},\"author\":{\"name\":\"Nathalie DOREMIEUX\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/8ca103ff9c8097bdcf31526b19ed8739\"},\"headline\":\"How to Add Any Font You Want to Your Website\",\"datePublished\":\"2013-07-14T23:11:51+00:00\",\"dateModified\":\"2017-01-25T10:46:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/\"},\"wordCount\":933,\"commentCount\":7,\"image\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg\",\"articleSection\":[\"General News\",\"WordPress Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/\",\"url\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/\",\"name\":\"WordPress Add Font Tutorial: how to Add any Font to Your Website\",\"isPartOf\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg\",\"datePublished\":\"2013-07-14T23:11:51+00:00\",\"dateModified\":\"2017-01-25T10:46:49+00:00\",\"author\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/8ca103ff9c8097bdcf31526b19ed8739\"},\"description\":\"WordPress Add Font Tutorial: How to Add any Font to Your Website, the easy way, you can do it in no time.\",\"breadcrumb\":{\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage\",\"url\":\"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg\",\"contentUrl\":\"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wphelpclub.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Any Font You Want to Your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/#website\",\"url\":\"https:\/\/wphelpclub.com\/blog\/\",\"name\":\"WP Help Club Blog\",\"description\":\"WordPress Tutorials and News\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wphelpclub.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/8ca103ff9c8097bdcf31526b19ed8739\",\"name\":\"Nathalie DOREMIEUX\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/82baece9470e0852eb4cf26a2f1eb24d0edc65a0105410afaedc0764bd27b174?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/82baece9470e0852eb4cf26a2f1eb24d0edc65a0105410afaedc0764bd27b174?s=96&d=mm&r=g\",\"caption\":\"Nathalie DOREMIEUX\"},\"sameAs\":[\"http:\/\/wphelpclub.com\",\"https:\/\/x.com\/https:\/\/twitter.com\/natdoremieux\"],\"url\":\"https:\/\/wphelpclub.com\/blog\/author\/nathalie\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Add Font Tutorial: how to Add any Font to Your Website","description":"WordPress Add Font Tutorial: How to Add any Font to Your Website, the easy way, you can do it in no time.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/","twitter_misc":{"Written by":"Nathalie DOREMIEUX","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#article","isPartOf":{"@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/"},"author":{"name":"Nathalie DOREMIEUX","@id":"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/8ca103ff9c8097bdcf31526b19ed8739"},"headline":"How to Add Any Font You Want to Your Website","datePublished":"2013-07-14T23:11:51+00:00","dateModified":"2017-01-25T10:46:49+00:00","mainEntityOfPage":{"@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/"},"wordCount":933,"commentCount":7,"image":{"@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage"},"thumbnailUrl":"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg","articleSection":["General News","WordPress Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/","url":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/","name":"WordPress Add Font Tutorial: how to Add any Font to Your Website","isPartOf":{"@id":"https:\/\/wphelpclub.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage"},"image":{"@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage"},"thumbnailUrl":"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg","datePublished":"2013-07-14T23:11:51+00:00","dateModified":"2017-01-25T10:46:49+00:00","author":{"@id":"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/8ca103ff9c8097bdcf31526b19ed8739"},"description":"WordPress Add Font Tutorial: How to Add any Font to Your Website, the easy way, you can do it in no time.","breadcrumb":{"@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#primaryimage","url":"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg","contentUrl":"http:\/\/wphelpclub.com\/blog\/wp-content\/uploads\/2013\/07\/fonts.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/wphelpclub.com\/blog\/wordpress-add-font\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wphelpclub.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Any Font You Want to Your Website"}]},{"@type":"WebSite","@id":"https:\/\/wphelpclub.com\/blog\/#website","url":"https:\/\/wphelpclub.com\/blog\/","name":"WP Help Club Blog","description":"WordPress Tutorials and News","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wphelpclub.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/8ca103ff9c8097bdcf31526b19ed8739","name":"Nathalie DOREMIEUX","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wphelpclub.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/82baece9470e0852eb4cf26a2f1eb24d0edc65a0105410afaedc0764bd27b174?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82baece9470e0852eb4cf26a2f1eb24d0edc65a0105410afaedc0764bd27b174?s=96&d=mm&r=g","caption":"Nathalie DOREMIEUX"},"sameAs":["http:\/\/wphelpclub.com","https:\/\/x.com\/https:\/\/twitter.com\/natdoremieux"],"url":"https:\/\/wphelpclub.com\/blog\/author\/nathalie\/"}]}},"_links":{"self":[{"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/posts\/753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/comments?post=753"}],"version-history":[{"count":7,"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/posts\/753\/revisions"}],"predecessor-version":[{"id":1507,"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/posts\/753\/revisions\/1507"}],"wp:attachment":[{"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/media?parent=753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/categories?post=753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wphelpclub.com\/blog\/wp-json\/wp\/v2\/tags?post=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}