Jump to content
Sign in to follow this  
platformuser

Inserting @font-face in PlatformPro

Recommended Posts

platformuser

Hello, how can I use @font-face in PlatformPro? The font Linux Libertine is on my webserver (Download @font-face-kit: http://www.fontsquirrel.com/fonts/Linux-Libertine). I prefer inserting a css code in PlatformPro > Custom Code > CSS Rules. Creating a child theme makes more effort. Thank you for your advice! Lars

Share this post


Link to post
Share on other sites
kastelic
Its no different than any other theme. Download the @font-face kit for your font from font squirell. Upload the fonts somewhere on your server. Copy the CSS in the kit into your custom CSS box. Make sure to change the paths to the fonts to point to the correct location. When you override a font you may need the !important declaration: [code] h1{ font-family: 'custom-font', arial !important; } [/code]

Share this post


Link to post
Share on other sites
platformuser
Hi kastelic, thank you for your help! Unfortunately I'm not successful. This is my inserted css code in PlatformPro > Custom Code > CSS Rules: [code]@font-face { font-family: 'LinuxLibertineORegular'; src: url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.eot'); src: url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.eot?#iefix') format('embedded-opentype'), url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.woff') format('woff'), url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.ttf') format('truetype'), url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.svg#LinuxLibertineORegular') format('svg'); font-weight: normal; font-style: normal; } /* Primary Font Style */ body, .font1, .font-primary, .commentlist, input{ font-family:'LinuxLibertineORegular',sans-serif !important} /* Header Font Style */ h1, h2, h3, h4, h5, h6, .site-title{ font-family:'LinuxLibertineORegular',sans-serif !important} /* Secondary Font Style */ .font2, .font-sub, ul.main-nav li a, #secondnav li a, .metabar, .subtext, .subhead, .widget-title, .post-comments, .reply a, .editpage, #pagination .wp-pagenavi, .post-edit-link, #wp-calendar caption, #wp-calendar thead th, .soapbox-links a, .fancybox, .standard-form .admin-links, #featurenav a, .pagelines-blink, .ftitle small, .button, input[type="submit"], input[type="button"], input[type="reset"], .submit{ font-family:'LinuxLibertineORegular',sans-serif !important; text-transform: uppercase; letter-spacing: .1em; } input[type="text"], input[type="password"], textarea, #dsq-content textarea{ font-family:'LinuxLibertineORegular',sans-serif !important}[/code] With best regards Lars

Share this post


Link to post
Share on other sites
Danny
Well Im not entirely sure on @font-face, but looking at your code you're missing some ; after a few !important. Try fixing the CSS and see if that resolves the issue.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
platformuser
Hi Danny, thanks, but after fixing my css, it doesn't work yet. This is my revised CSS: [code]@font-face { font-family: 'LinuxLibertineORegular'; src: url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.eot'); src: url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.eot?#iefix') format('embedded-opentype'), url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.woff') format('woff'), url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.ttf') format('truetype'), url('www.homepage.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.svg#LinuxLibertineORegular') format('svg'); font-weight: normal; font-style: normal;} /* Primary Font Style */ body, .font1, .font-primary, .commentlist, input{ font-family:'LinuxLibertineORegular',sans-serif !important;} /* Header Font Style */ h1, h2, h3, h4, h5, h6, .site-title{ font-family:'LinuxLibertineORegular',sans-serif !important;} /* Secondary Font Style */ .font2, .font-sub, ul.main-nav li a, #secondnav li a, .metabar, .subtext, .subhead, .widget-title, .post-comments, .reply a, .editpage, #pagination .wp-pagenavi, .post-edit-link, #wp-calendar caption, #wp-calendar thead th, .soapbox-links a, .fancybox, .standard-form .admin-links, #featurenav a, .pagelines-blink, .ftitle small, .button, input[type="submit"], input[type="button"], input[type="reset"], .submit{ font-family:'LinuxLibertineORegular',sans-serif !important; text-transform: uppercase; letter-spacing: .1em; } input[type="text"], input[type="password"], textarea, #dsq-content textarea{ font-family:'LinuxLibertineORegular',sans-serif !important;} [/code]I appreciate your help! Lars

Share this post


Link to post
Share on other sites
Jenny
I doubt the fonts are really sourced at "www.homepage.com". I'd fix that and add an http:// at the front while you're at it.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
platformuser
Hi Jenny, it works! Thank you very much! Perhaps someone else has the same problem. Solution: Insert this CSS Code in PlatformPro > Custom Code > CSS Rules: [code]@font-face { font-family: 'LinuxLibertineORegular'; src: url('http://www.xyz.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.eot'); src: url('http://www.xyz.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.xyz.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.woff') format('woff'), url('http://www.xyz.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.ttf') format('truetype'), url('http://www.xyz.com/wp-content/fonts/linux-libertine-fontfacekit/linlibertine_re-4.7.5ro-webfont.svg#LinuxLibertineORegular') format('svg'); font-weight: normal; font-style: normal;} /* Primary Font Style */ body, .font1, .font-primary, .commentlist, input{ font-family:'LinuxLibertineORegular',sans-serif !important;} /* Header Font Style */ h1, h2, h3, h4, h5, h6, .site-title{ font-family:'LinuxLibertineORegular',sans-serif !important;} /* Secondary Font Style */ .font2, .font-sub, ul.main-nav li a, #secondnav li a, .metabar, .subtext, .subhead, .widget-title, .post-comments, .reply a, .editpage, #pagination .wp-pagenavi, .post-edit-link, #wp-calendar caption, #wp-calendar thead th, .soapbox-links a, .fancybox, .standard-form .admin-links, #featurenav a, .pagelines-blink, .ftitle small, .button, input[type="submit"], input[type="button"], input[type="reset"], .submit{ font-family:'LinuxLibertineORegular',sans-serif !important; text-transform: uppercase; letter-spacing: .1em; } input[type="text"], input[type="password"], textarea, #dsq-content textarea{ font-family:'LinuxLibertineORegular',sans-serif !important;}[/code] Best regards Lars

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×