-1

I have to use a font for a website which I can't find in Typekit and can't upload to Fontsquirrel. So I can't make a webkit. I tried to embed the font with CSS and @font-face, but it doesn't seem to work.

This is my CSS:

@font-face {
    font-family: "Oz Handicraft";
    src: url(localhost/wordpress/wp-content/themes/twentythirteen_child/ozHandicraft.otf);
    font-weight: normal;
}

@font-face {
    font-family: "Liberation Regular";
    src: url(public_html/your-site/wp-content/themes/twentythirteen_child/liberationRegular.tff);
    font-weight: normal;
}

@font-face {
    font-family: "Liberation Bold";
    src: url(public_html/your-site/wp-content/themes/twentythirteen_child/liberationBold.tff);
    font-weight: normal;
}

@font-face {
    font-family: "Liberation Bold Italic";
    src: url(public_html/your-site/wp-content/themes/twentythirteen_child/liberationBoldItalic.tff);
    font-weight: normal;
}

@font-face {
    font-family: "Liberation Italic";
    src: url(public_html/your-site/wp-content/themes/twentythirteen_child/liberationItalic.tff);
    font-weight: normal;
}

Can anyone help me?

EDIT: I finally found the problem and it seems like it's working now.

@font-face {
    font-family: "Oz Handicraft";
    src: url(fonts/ozHandicraft.otf);

My mistake was that I wrote the complete path in the url and not the path from the stylesheet (which is located in the theme-folder)

  • is this the right one? I've found this link : typekit.com/fonts/liberation-sans – Serkan Algur Dec 25 '17 at 21:46
  • No, I'm looking for the font Oz Handicraft. @SerkanAlgur – Féileacán Dec 25 '17 at 21:46
  • Oh, sorry my bad. Can you try this config with fontsquirrel. This will generate a base64 css file with oz handicraft file. (added as answer) – Serkan Algur Dec 25 '17 at 22:02
  • @SerkanAlgur Already tried it. but fontSquirrel doesn't know the Oz Handicraft font or blocked it somehow – Féileacán Dec 25 '17 at 22:06
  • Your URLs are incorrect. They're a path to the file, not a URL – Jacob Peattie Dec 26 '17 at 2:42
0

This is the fontsquirrel config data. save as generator_config.txt and upload with your font file. select expert mode.

# Font Squirrel Font-face Generator Configuration File
# Upload this file to the generator to recreate the settings
# you used to create these fonts.

{"mode":"expert","formats":["ttf"],"tt_instructor":"ttfautohint","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","webonly":"Y","options_subset":"basic","subset_range":["lowercase","uppercase","currency","malagasy","turkish"],"subset_custom":"","subset_custom_range":"","subset_ot_features":"all","subset_ot_features_list":"","base64":"Y","style_link":"Y","css_stylesheet":"stylesheet.css","filename_suffix":"","emsquare":"2048","spacing_adjustment":"0","rememberme":"Y"}
  • I can't upload the font Oz Handicraft because it seems to be clocked by FontSquirrel. – Féileacán Dec 25 '17 at 22:09
  • I am not sure if download link share is against to rules but i converted oz Handicraft (BT one) to webfont with fontsquirrel. You can view what zip files includes and download. yadi.sk/d/B--UDFN33Qx6S8 – Serkan Algur Dec 25 '17 at 22:18
  • Maybe I'm doing something wrong. I tried it again. Do I have to put the font name under double quotes? Or shouldn't I write the code in style.css or write the h1 code in the additional CSS? – Féileacán Dec 25 '17 at 22:47
  • If you include base64 font file css to your page try h1,h2,h3,h4,h5,h6 {font-family: 'ozhandicraft_btroman';} – Serkan Algur Dec 25 '17 at 23:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.