{"id":1081,"date":"2016-01-07T15:59:45","date_gmt":"2016-01-07T13:59:45","guid":{"rendered":"https:\/\/tulipemedia.com\/?p=1081"},"modified":"2025-05-15T17:59:43","modified_gmt":"2025-05-15T15:59:43","slug":"how-to-add-a-custom-font-to-a-wordpress-theme-with-fontface-css3","status":"publish","type":"post","link":"https:\/\/tulipemedia.com\/en\/comment-ajouter-une-police-personnalisee-a-un-theme-wordpress-avec-fontface-css3\/","title":{"rendered":"How to add a custom font to a WordPress theme with @fontface CSS3"},"content":{"rendered":"<p>Declaring a custom font in your WordPress theme is very useful for personalizing it and adapting it to your graphic charter. However, sometimes the font of your dreams is not found in your theme options, nor on Google Fonts or TypeKit.<\/p>\n<p>In this case, you will have to tweak your theme a little to add the font you want. But don&#039;t panic, I&#039;ll explain how to do it!<\/p>\n<h2>Download the font<\/h2>\n<p>First of all, you must have the font, either by downloading it from font sites like <a href=\"http:\/\/www.dafont.com\/fr\" target=\"_blank\" rel=\"noopener\">dafont<\/a> for example, or by your own means.<\/p>\n<p>Beware of copyright, which you must respect. Do not hesitate to purchase the font when necessary. You will only be paying those who worked on it so that you can enjoy it!<\/p>\n<p>TTF and OTF formats are currently widely used, and are compatible with most browsers. However, if you need to convert the font to other formats, go to <a href=\"http:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" target=\"_blank\" rel=\"noopener\">Font Squirrel<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Upload the font to your server<\/h2>\n<p>Upload your font to a \u201cfonts\u201d folder in your theme (preferably child theme), via FTP.<\/p>\n<p>&nbsp;<\/p>\n<h2>Declare your new font in your CSS<\/h2>\n<p>Go to the CSS file of the child theme if you uploaded the font in the \u201cfonts\u201d folder of the child theme, otherwise in the CSS file of the parent theme, or in the settings of your theme if it allows you to customize CSS via the WordPress backoffice. Here&#039;s how to do it:<\/p>\n<pre>@font-face { font-family: myfont; src: url(&quot;fonts\/mapolice.otf&quot;); src: url(fonts\/mapolice.ttf) format(&#039;truetype&#039;); font-weight: normal; }\n\n<\/pre>\n<h2>Use the new font via CSS<\/h2>\n<p>To use your newly declared new font, nothing could be simpler, you just need to tell the CSS file which formats you want to assign the font to:<\/p>\n<p>&nbsp;<\/p>\n<pre>p,span {font-family: mapolice, Open Sans, Arial, sans-serif !important;} h1,h2,h3,h4,h5,h6 {font-family: mapolice, Open Sans, Arial, sans-serif !important;} ;} div {font-family: mapolice, Open Sans, Arial, sans-serif !important;}<\/pre>\n<p>And there you have it, if this article helped you, don\u2019t hesitate to share it on social networks \ud83d\ude09<\/p>","protected":false},"excerpt":{"rendered":"<p>D\u00e9clarer une custom font (police personnalis\u00e9e) dans votre th\u00e8me WordPress s&rsquo;av\u00e8re tr\u00e8s utile pour le personnaliser et l&rsquo;adapter \u00e0 votre charte graphique. Or, il arrive que la police d&rsquo;\u00e9criture de vos r\u00eaves ne se trouve ni dans les options de votre th\u00e8me, ni sur Google Fonts ou TypeKit. Dans ce cas, il va falloir bidouiller [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":1083,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[164],"class_list":["post-1081","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-snippets","tag-tips-wordpress"],"_links":{"self":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/1081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/comments?post=1081"}],"version-history":[{"count":1,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/1081\/revisions"}],"predecessor-version":[{"id":5313,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/1081\/revisions\/5313"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/media\/1083"}],"wp:attachment":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/media?parent=1081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/categories?post=1081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/tags?post=1081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}