Schriftarten über @font-face werden bei Safari nicht angezeigt

  • Gelöst melojezzed

    (@melojezzed)


    vor 1 Jahr, 6 Monaten

    Hallo,

    ich habe auf der o.g. Website eine Schriftart über @font-face eingebunden und mich gewundert, dass die Schriftart total anders aussieht. Nach einiger Zeit hin und her probieren, habe ich gemerkt, dass die Schrift bei Chrome jedoch richtig angezeigt wird. Weiß jemand was ist da machen kann? Ich habe otf, eot, ttf, woff, woff2 hochgeladen.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 6 Monaten

    Hallo,
    wie man Schriftarten korrekt einbindet, kannst du z. B. in dem folgenden Beitrag nachlesen.

    Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.

    Viele Grüße
    Hans-Gerd

    Thread-Starter melojezzed

    (@melojezzed)

    vor 1 Jahr, 6 Monaten

    "

wp-core

version: 6.2.2
    site_language: de_DE
    user_language: de_DE
    timezone: +00:00
    permalink: /%postname%/
    https_status: false
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1
    dotorg_communication: true

wp-paths-sizes

wordpress_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app
    wordpress_size: loading…
    uploads_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app/wp-content/uploads
    uploads_size: loading…
    themes_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app/wp-content/themes
    themes_size: loading…
    plugins_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app/wp-content/plugins
    plugins_size: loading…
    database_size: loading…
    total_size: loading…

wp-dropins (2)

advanced-cache.php: true
    object-cache.php: true

wp-active-theme

name: OceanWP Child Theme (oceanwp-child-theme-master)
    version: 1.0
    author: OceanWP
    author_website: https://oceanwp.org/
    parent_theme: OceanWP (oceanwp)
    theme_features: core-block-patterns, widgets-block-editor, align-wide, wp-block-styles, responsive-embeds, editor-styles, editor-style, menus, post-formats, title-tag, automatic-feed-links, post-thumbnails, custom-header, custom-logo, html5, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, customize-selective-refresh-widgets, widgets
    theme_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app/wp-content/themes/oceanwp-child-theme-master
    auto_update: Aktiviert

wp-parent-theme

name: OceanWP (oceanwp)
    version: 3.4.4
    author: OceanWP
    author_website: https://oceanwp.org/about-oceanwp/
    theme_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app/wp-content/themes/oceanwp
    auto_update: Aktiviert

wp-themes-inactive (3)

Twenty Twenty-One: version: 1.8, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
    Twenty Twenty-Three: version: 1.1, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
    Twenty Twenty-Two: version: 1.4, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert

wp-mu-plugins (2)

WordPress automation by Installatron: author: (undefined), version: (undefined)
    WordPressSecureMode.php: author: (undefined), version: (undefined)

wp-plugins-active (14)

Antispam Bee: version: 2.11.3, author: pluginkollektiv, Automatische Aktualisierungen aktiviert
    Autoptimize: version: 3.1.7, author: Frank Goossens (futtta), Automatische Aktualisierungen aktiviert
    Disable & Remove Google Fonts: version: 1.5.4, author: Fonts Plugin, Automatische Aktualisierungen aktiviert
    Elementor: version: 3.13.4, author: Elementor.com, Automatische Aktualisierungen aktiviert
    Limit Login Attempts Reloaded: version: 2.25.18, author: Limit Login Attempts Reloaded, Automatische Aktualisierungen aktiviert
    Ocean Extra: version: 2.1.7, author: OceanWP, Automatische Aktualisierungen aktiviert
    Ocean Stick Anything: version: 2.0.6, author: OceanWP, Automatische Aktualisierungen aktiviert
    Performance Lab: version: 2.3.0, author: WordPress Performance Team, Automatische Aktualisierungen aktiviert
    Real Cookie Banner (Free): version: 3.7.0, author: devowl.io, Automatische Aktualisierungen aktiviert
    UpdraftPlus - Backup/Restore: version: 1.23.4, author: UpdraftPlus.Com, DavidAnderson, Automatische Aktualisierungen aktiviert
    WPForms Lite: version: 1.8.1.3, author: WPForms, Automatische Aktualisierungen aktiviert
    WP Super Cache: version: 1.9.4, author: Automattic, Automatische Aktualisierungen aktiviert
    Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen aktiviert
    Yoast SEO: version: 20.8, author: Team Yoast, Automatische Aktualisierungen aktiviert

wp-media

image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1692
    imagemagick_version: ImageMagick 6.9.12-60 Q16 x86_64 17403 https://legacy.imagemagick.org
    imagick_version: 3.5.1
    file_uploads: File uploads is turned off
    post_max_size: 128M
    upload_max_filesize: 128M
    max_effective_size: 128 MB
    max_file_uploads: 20
    imagick_limits:
    imagick::RESOURCETYPE_AREA: 4 GB
    imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
    imagick::RESOURCETYPE_FILE: 192
    imagick::RESOURCETYPE_MAP: 4 GB
    imagick::RESOURCETYPE_MEMORY: 2 GB
    imagick::RESOURCETYPE_THREAD: 1
    imagick::RESOURCETYPE_TIME: 9.2233720368548E+18
    imagemagick_file_formats: 3FR, 3G2, 3GP, A, AAI, AI, APNG, ART, ARW, AVI, AVS, B, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, C, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K, K25, KDC, LABEL, M, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, O, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, R, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCREENSHOT, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, Y, YCbCr, YCbCrA, YUV
    gd_version: bundled (2.1.0 compatible)
    gd_formats: GIF, JPEG, PNG, WebP, BMP
    ghostscript_version: not available

wp-server

server_architecture: Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP
    httpd_software: Apache/2.4.57 (Unix)
    php_version: 8.0.28 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 4000
    time_limit: 240
    memory_limit: 512M
    max_input_time: 60
    upload_max_filesize: 128M
    php_post_max_size: 128M
    curl_version: 7.88.1 OpenSSL/1.1.1t
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: true

wp-database

extension: mysqli
    server_version: 5.7.41-log
    client_version: mysqlnd 8.0.28
    max_allowed_packet: 67108864
    max_connections: 3000

wp-constants

WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app/wp-content
    WP_PLUGIN_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_06/app/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 512M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: true
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: Nicht definiert
    DB_CHARSET: utf8
    DB_COLLATE: undefined

wp-filesystem

wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    mu-plugins: writable

wpforms

version: 1.8.1.3
    lite: Mai 26, 2023 @ 1:16pm
    upload_dir: Beschreibbar
    total_forms: undefined
    total_submissions: undefined

"
    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 6 Monaten

    Besonders hilfreich ist das nicht.

    Screenshot

    Welche Änderungen du in deinem Child-Theme vorgenommen hast, können wir auch nicht beurteilen. Genauso wenig wissen wir, ob die Font-Dateien tatsächlich in wp-content/themes/oceanwp-child-theme-master/fonts liegen oder vielleicht woanders.

    Das Plugin Disable & Remove Google Fonts könnte sich auf die Verwendung von Fonts auswirken – probier bitte aus, ob sich was ändert, wenn du das deaktivierst.

    Cache- und Optimierungs-Plugins (WP Super Cache, Autoptimize) sollten während der Fehlersuche deaktiviert werden, damit du keine zwischengespeicherten Seiten siehst und dich wunderst, wieso Änderungen nicht angezeigt werden.

    Thread-Starter melojezzed

    (@melojezzed)

    vor 1 Jahr, 6 Monaten

    Achso, okay. Vielen dank für die Tipps! Ich habe nun alle Optimierungsplugins und „Disable und Remove Google fonts“ deaktiviert, den Cache speicher des Browsers gelöscht und die Seite neu geladen, jedoch habe ich keine Veränderung gesehen. Dann schicke ich mal das dazu:

    style.css

    "

/*
    Theme Name: OceanWP Child Theme
    Theme URI: https://oceanwp.org/
    Description: OceanWP WordPress theme. Sample child theme.
    Author: OceanWP
    Author URI: https://oceanwp.org/
    Template: oceanwp
    Version: 1.0
    */

/* Parent stylesheet should be loaded from functions.php not using @import */

@font-face {
    font-family: 'GreatVibes-Regular';
    src: url('fonts/GreatVibes-Regular.eot');
    src: url('fonts/GreatVibes-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/GreatVibes-Regular.otf) format('otf')
    url('fonts/GreatVibes-Regular.woff') format('woff'),
    url('fonts/GreatVibes-Regular.woff2') format('woff2');
    font-display: swap;
    }

"

    und

    functions.php:

    "

<?php

/**

 * OceanWP Child Theme Functions

 *

 * When running a child theme (see http://codex.wordpress.org/Theme_Development

 * and http://codex.wordpress.org/Child_Themes), you can override certain

 * functions (those wrapped in a function_exists() call) by defining them first

 * in your child theme's functions.php file. The child theme's functions.php

 * file is included before the parent theme's file, so the child theme

 * functions will be used.

 *

 * Text Domain: oceanwp

 * @link http://codex.wordpress.org/Plugin_API

 *

 */

/**

 * Load the parent style.css file

 *

 * @link http://codex.wordpress.org/Child_Themes

 */

function oceanwp_child_enqueue_parent_style() {

// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update the theme).

$theme   = wp_get_theme( 'OceanWP' );

$version = $theme->get( 'Version' );

// Load the stylesheet.

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );

}

add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

// Add custom font to font settings

function ocean_add_custom_fonts() {

    return array( 'GreatVibes-Regular' ); // You can add more then 1 font to the array!

}

"

    Ansonsten habe ich keine Veränderungen vorgenommen.

    Könnte es auch sein, dass es an Safari liegt? Weil bei Chome ist die richtige Schrift ja sichtbar.

    Vielen Dank!

    Thread-Starter melojezzed

    (@melojezzed)

    vor 1 Jahr, 6 Monaten

    Problem gelöst!!!

    Ein Anführungsstrich hat in der Style.css bei eot gefehlt!! So eine Kleinigkeit mit einer riesen Auswirkung 😀

    Vielen Dank!

    • Diese Antwort wurde geändert vor 1 Jahr, 6 Monaten von melojezzed.
    • Diese Antwort wurde geändert vor 1 Jahr, 6 Monaten von melojezzed.
    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 6 Monaten

    super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 6 Monaten

    Ein Anführungsstrich hat in der Style.css bei eot gefehlt!!

    Eher bei 

    url('fonts/GreatVibes-Regular.otf) format('otf')

    Aber schön, wenn du den Fehler gefunden hast. 👍🏼

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Schriftarten über @font-face werden bei Safari nicht angezeigt“ ist für neue Antworten geschlossen.