-
Posts
-
Hi –
I’m having trouble with adding a custom font. I’m using is Cavier Dreams (http://www.fontsquirrel.com/fonts/caviar-dreams)
I downloaded the webfile and inserted into the directory enfold/css/cavier-dreams
than I put in the code in the quick css
@font-face {
font-family: ‘caviar_dreamsitalic’;
src: url(‘fonts/CaviarDreams_Italic-webfont.eot’);
src: url(‘fonts/CaviarDreams_Italic-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/CaviarDreams_Italic-webfont.woff’) format(‘woff’),
url(‘fonts/CaviarDreams_Italic-webfont.ttf’) format(‘truetype’),
url(‘fonts/CaviarDreams_Italic-webfont.svg#caviar_dreamsitalic’) format(‘svg’);
font-weight: normal;
font-style: normal;}
nothing is showing up under the font menu… hwo do I get this to work?
Hey mcraig77!
Please instead follow the instructions here: http://kriesi.at/documentation/enfold/register-additional-google-fonts-for-theme-options/
Cheers!
DakeHey!
Sorry about that, that is google font specific.
This thread however has useful information about implementing custom fonts in tff and other font formats directly from the website it is hosted on: https://kriesi.at/support/topic/how-do-i-add-custom-fonts-to-the-enfold-theme/
Best regards,
DakeHi,
Did you try using the full URL for the font in the CSS to see if that helps? If it’s not imported properly you cannot use the font.
Regards,
RikardYeah… I need to start from scratch on this. What is the easiest way to import a font from http://www.fontsquirrel.com/
This is is font I’m trying to install http://www.fontsquirrel.com/fonts/Caviar-Dreams
I think the issue is there are several posts on this in the enfold forum. Where would I need to place this font in the ftp directory?and than what code do I add to the css?
will this font than be in the enfold options menu if done correctly?
Hi,
You can place it anywhere really, to make it easy on yourself you can place it in the root folder of your site. Then make sure that you verify that the full URL to the font is working, then use that URL in the CSS. After that you should be good to go.
Thanks,
RikardOK
So i went ahead and put the font files in this directory :
See private data
I added this code to the css linking the css to the files, I tested and put those exact urls in y browser and they download fine
See private dataThan I added this css code to make the body font the newly added font:
p { font-family: ‘caviar_dreamsregular’, Arial, sans-serif; }Nothing seems to be happening… I would like this font to be the navigation Menu font as well including the bar above the top bar above the menu.
Please advise
I have been facing the same issue. I copied this code in header.php
<style type=”css”>
@font-face {
font-family: ‘MonsOlympiaBold’;
src: url(‘http://ferodevices.com/wp-content/themes/enfold/fonts/MonsOlympiaBold.otf’);
font-family: ‘MonsOlympiaCondensed’;
src: url(‘http://ferodevices.com/wp-content/themes/enfold/fonts/MonsOlympiaCondensed.otf’);
}
</style>
Still the font is not displaying when i apply it to an element. Please help.Hi mcraig77, No i cannot see your private data. Did you got a solution for the issue of importing custom fonts
Hi!
following up into the thread will push it behind in our queue.
Follow these instructions here please: https://css-tricks.com/snippets/css/using-font-face/
Best regards,
AndyHey Andy –
Yes that is what I did… nothing is showing up.
Please see my post from October 2, 2015 at 8:08 pm. I did everything right… I think…When I go into the urls where i put the ftp files they download…
How would I make this code be the headers? and the navigation?
This is the code I have again ( See private)
Hey,
Did you try your CSS with the !important statement? Like so:
p { font-family: ‘caviar_dreamsregular’, Arial, sans-serif !important; }Regards,
RikardHi Josue
What code do I have to putt in that area.. this?
<style type=”css”>
@font-face {
font-family: ‘caviar_dreamsregular’;
src: monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.eot(‘CaviarDreams-webfont.eot’);
src: monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.eot(‘CaviarDreams-webfont.eot?#iefix’) format(‘embedded-opentype’),
monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.woff(‘CaviarDreams-webfont.woff’) format(‘woff’),
monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.ttf(‘CaviarDreams-webfont.ttf’) format(‘truetype’),
monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.svg(‘CaviarDreams-webfont.svg#caviar_dreamsregular’) format(‘svg’);
font-weight: normal;
font-style: normal;}
</style>After I put that in how do I assign that font to elements including the navationg menu, headers, body, footer, socket
Hi!
These should work (in Quick CSS) once you place the @font-face code in the head element:
p { font-family: ‘caviar_dreamsregular’, Arial, sans-serif; } h1 { font-family: ‘caviar_dreamsregular’,Delicious, sans-serif; }Cheers!
JosueOK I just put the element in the header and also added that code to quick css and things dont seem to have changed.
Please advise
There was some typos in your code, i’ve fixed them and also moved it to the GA tracking code field in Theme Options (you can place this kind of code here to avoid editing main theme files). It is working now on paragraphs and h1s, if you want it for the menu items use the following:
span.avia-menu-text { font-family: 'caviar_dreamsregular'; }Regards,
JosueHey Josue –
I saw it for a minute and than I pasted that new code and now nothing works. Ugh… thanks for the help on this!
It is no longer working on the H1 and paragraph :(
Please advise
I’ve re-added it now, here’s the corrected code for future reference:
<style> @font-face { font-family: 'caviar_dreamsregular'; src: url("http://monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.eot"); src: url("http://monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.eot?#iefix") format("embedded-opentype"), url("http://monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.woff") format('woff'), url("http://monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.ttf") format('truetype'), url("http://monarchejuice.com/wp-content/themes/enfold/css/caviardreams_regular_macroman/CaviarDreams-webfont.svg#caviar_dreamsregular") format('svg'); font-weight: normal; font-style: normal; } </style>Regards,
JosueThanks Josue –
But again the font doesn’t seem to be loading… Iv’e tried it on Chrome and Safari…and nothing… :(
Please adviseAlso How do I make all headers this font? Along with the footer text and headers and copyright info at the bottom?
Ok check it now, i’ve used this code in Quick CSS:
h1, h2, h3, h4, h5, h6, #footer, #socket { font-family: 'caviar_dreamsregular',Delicious, sans-serif !important; }If you want to extend it to more elements simply edit the selector.
Cheers!
Josue
- You must be logged in to reply to this topic.