Archived topic
syntax error, unexpected token ":"
15 replies · Started by Luke on January 19, 2023
Hi,
I am trying to download local fonts and am following the instructions in your video. When I copy the CSS into the snippits plugin it displays a "syntax error, unexpected token ":"
The code is exactly the same and I have tried multiple different fonts and still the same result, any ideas?
Luke
Hi there,
can you paste your code here.
Before submitting the reply, highlight the CSS and click CODE button in the toolbar. This will preserve its formatting.
/* nunito-regular - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('../fonts/nunito-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-v25-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}
I can't see any issue with that code.
In the snippets plugin you're using does that have an option to set the snippet to CSS - as i get the impression its expecting some other code eg. PHP ?
I would also recommend you use the Full URL including the domain in the url
It appears the code options Code Snippet allows are;
PHP
HTML
JS - Paid version only
CSS - Paid version only
As I havent paid for this the only options I have are PHP and HTML.....
On the video tutorial the guy enters in PHP which is what I am doing?
Very odd, cant believe its this difficult to download a font locally, is there an easier way?
Go to Customizer > Additional CSS and paste the CSS in there.
Ok theres no error message and the CSS is in there but when I go to upload the font files into Media it doesnt see any files in the folders. Sorry about this, I even did a full WP reset before talking with you but still nothing.
Did you add this to your PHP Snippets?
add_filter( 'upload_mimes', function( $mimes ) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'application/x-font-woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';
return $mimes;
} );
I have copy pasted the code in my second message into Customizer > Additional CSS
Snippets will not let me post this without the error
Are you suggesting I copy paste the code in your last message into Snippets?
This code is a PHP snippet that should be added through functions.php if you're using the Child theme or Code Snippets if not: https://generatepress.com/forums/topic/syntax-error-unexpected-token/#post-2501855
Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets
This code on the other hand can be added through Appearance > Customize > Additional CSS: https://generatepress.com/forums/topic/syntax-error-unexpected-token/#post-2501432
To clarify, yes, you need this snippet: https://generatepress.com/forums/topic/syntax-error-unexpected-token/#post-2501855 to upload such font files in your site.
Hi, thank you for your patience,
Ok so I added your code to Snippet plugin and added the font PHP to appearance-customize-additional CSS, this allowed me to get one font to work YIPPEE. But whenever I select the other font and switch off "use google fonts API" the font changes back to the default font.
Any ideas why its works on one and not the other? I have repeated the same process, even deleted and re-uploaded several times.
Very frustrating, again I appreciate your patience on this.
Luke
So this CSS code:
/* nunito-regular - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('../fonts/nunito-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-v25-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}
Take one of the URLs for example:
url('../fonts/nunito-v25-latin-regular.woff2') format('woff2'),
That needs to have the full URL.
Did you upload the fonts to the Media Library?
If so, select one of the fonts and in the sidepanel it will give you the full url.
Hi I attempted inserting the full URLs but had no joy, I have also looked into thirdparty plugin for hosting google fonts locally and it seems they struggle to work too. I'm defeated and will go forward using the default fonts available as I have little CSS experience and have wasted too much time on this. I appreciate your patience with me.
Thank you
Luke
Ok, let us know if you ever want to revisit this.
Will do thank you
Luke