Andrew Christensen asked 1 year ago
I'm having a lot of trouble getting the formidable form to pdf plugin. I've defined the font for EVERYTHING to be Arial. But no matter what I do, it shows up as times new roman. I'm hitting up against a deadline and I have no idea why it's not working. In my functions.php file I have:
add_filter('frm_pdfs_css', 'custom_font_pdfs_css', 10, 2);
function custom_font_pdfs_css( $css, $args ) {
$custom_css = 'body { font-family: Arial, sans-serif; }';
return $css . $custom_css;
}
In my views I have code like this:
<table width="100%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr>
<td width="50%">[display-frm-data id="5272" restaurant="[56]"]</td>
<td width="50%">
<table width="100%" cellspacing="40" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center">
<img src="[31 size=full show_image=0]" width="150">
</td>
</tr>
<tr>
<td align="center" font="arial" style="font-family: arial;">[32]</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h3 style="font-family: Arial; font-size: 23px;">[55]</h3>
<p style="font-family: Arial;">The job description doesn't imply an employment contract, nor
is it intended to include a comprehensive listing of daily activities,
duties or responsibilities required of the Employee for this job.
Other tasks may be assigned based on business needs and the department
supervisor's request.</p>
Victor Font answered 1 year ago
Andrew Christensen
replied 1 year ago I am using views in the PDF view. So I am using the link to the pdf and defining a view. I wasn't able to get Arial to work unless I added ", sans-serif" to the places where I'm defining fonts. I'm new to FF and so I'm still struggling my way through all this. I have it working now with sans-serif.
Victor Font
replied 1 year ago Let me explain about how CSS works. The problem you're experiencing has nothing to do with Formidable. The filter you're using simply takes the CSS you write in the callback and adds it to the PDF style sheet. The browser does the rest.
When you define a font as "font-family: Arial, sans-serif;", you are specifying a prioritized list of one or more font family names and/or generic family names for the selected element.
Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.
This is why I asked in my first answer "Where are you defining the @font-face?"
The answer is you're not. It's not in your code.
Many system fonts are included with an operating system. Arial is a system font for windows and newer MacOS versions. In earlier MacOS versions, the default sans-serif font was Helvetica. Linux does not include Arial at all.
If you are absolutely certain that nothing worked until you added the generic system font name of 'Sans-serif" you are not loading Arial. You are you using the default OS sans-serif system font. You cannot depend on Arial being available to the browser as a display font unless you load the font files yourself using the @font-face definition.
To confirm, use the Fonts tab on your browser's development tool to see what fonts your site is actually using.
Please login or Register to submit your answer